img未响应srcset指定的维度

Question

我想使用srcset实现响应图像，如这里所述，因此用户加载的图像src与他的分辨率最相似。

问题是我做了这个测试，它对视口更改没有响应，

<img src="https://lorempixel.com/400/200/sports/"
      alt=""
      sizes="(min-width:1420px) 610px,
             (min-width:1320px) 500px,
             (min-width:1000px) 430px,
             (min-width:620px)  280px,
             280px"
      srcset="https://lorempixel.com/620/200/sports/ 280w,
              https://lorempixel.com/1000/300/animals/ 430w,
              https://lorempixel.com/1320/400/cats/ 610w,
              https://lorempixel.com/1420/500/abstract/ 1000w,
              https://lorempixel.com/1600/600/fashion/ 1220w" />

jsfiddle：http://jsfiddle.net/ad857m1r/9/

知道我错过了什么吗？

Answer 1

srcset属性在第一次加载时由浏览器解释，然后加载的图像存储在cache中，在清除cache并重新加载页面之前，浏览器可能不会加载任何其他图像。

如果您希望在页面的每个resize事件上重新解释srcset，则需要更新它，在每个url的末尾添加一个随机变量，然后浏览器将重新加载该屏幕大小的正确变量。

我在这个过程中添加了一个延迟，以减少它的执行次数。您会注意到，这种做法会迫使浏览器在每次调整大小时下载正确的图像，这对带宽不利。我不建议使用这种技术，让浏览器决定在每种情况下使用哪种图像。我认为调整视口大小在日常环境中并不常见。正如@KrisD所说，使用图片元素（使用某种方法使其与旧浏览器兼容）可能对您的目的更好。

var img = document.getElementById("myImage");
var srcset = img.getAttribute("srcset");
var delay;
window.onresize = function() {
    clearTimeout(delay);
    delay = setTimeout(refreshImage, 500);
}
function refreshImage() {
    var reg = /([^s]+)s(.+)/g;
    var random = Math.floor(Math.random() * 999999);
    img.setAttribute("srcset", srcset.replace(reg, "$1?r=" + random + " $2"));
}

jsfiddle

Answer 2

当您尝试在示例中为您提到的链接应用代码时，您对示例中的代码进行了一些编辑：

1-当你设置尺寸属性值时，你设置了最后一个，默认值为280，正如示例所解释的，但直接之前的值是580，而不是280

2-当你使用图像的一个伪生成器时，你在图像链接的末尾做了一个斜线，然后在将图像与其大小绑定之前留出空间，这已经被图像生成器网站翻译成图像上的文本，你需要将代码更改为以下代码，与你提到的示例链接中解释的代码相同

<img src="https://lorempixel.com/400/200/sports/"
  alt=""
  sizes="(min-width:1420px) 610px,
         (min-width:1320px) 500px,
         (min-width:1000px) 430px,
         (min-width:620px)  580px,
         280px"
  srcset="https://lorempixel.com/620/200/sports 280w,
          https://lorempixel.com/1000/300/animals 430w,
          https://lorempixel.com/1320/400/cats 610w,
          https://lorempixel.com/1420/500/abstract 1000w,
          https://lorempixel.com/1600/600/fashion 1220w" />

Answer 3

你只需复制并粘贴它。首先你需要知道的是，你必须按照递增的顺序排列图像的大小，然后你需要根据它进行调整。

例如

<img src="http://lorempixel.com/400/200/sports/"
      alt=""
      sizes="(min-width:1420px) 610px,
             (min-width:1320px) 500px,
             (min-width:1000px) 430px,
             (min-width:620px)  280px,
             280px"
      srcset="http://lorempixel.com/620/200/sports/ 620w,
              http://lorempixel.com/1000/300/animals/ 1000w,
              http://lorempixel.com/1320/400/cats/ 1320w,
              http://lorempixel.com/1420/500/abstract/ 1420w,
              http://lorempixel.com/1600/600/fashion/ 1600w" />

通过这个你可以查看你的结果，我刚刚尝试了这个和它的工作

img {
  width: 100%;  
}

<img src="http://lorempixel.com/400/200/sports/"
      alt=""
      sizes="(min-width:1420px) 610px,
             (min-width:1320px) 500px,
             (min-width:1000px) 430px,
             (min-width:620px)  280px,
             280px"
      srcset="http://lorempixel.com/620/200/sports/ 620w,
              http://lorempixel.com/1000/300/animals/ 1000w,
              http://lorempixel.com/1320/400/cats/ 1320w,
              http://lorempixel.com/1420/500/abstract/ 1420w,
              http://lorempixel.com/1600/600/fashion/ 1600w" />

备注->将您的图像称为image.jpg，这样会更有效。