Question

我想使用srcset实现响应式图像，如here所述，因此用户加载的图像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和the browser could not load any other image中，直到您清除cache并重新加载页面为止

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

我在此过程中添加了一个延迟，以减少执行的次数。您会注意到这种做法会强制浏览器在每次调整大小时下载正确的图像，这对带宽不利。我不建议使用这种技术，让浏览器决定在每种情况下使用哪种图像。我认为视口调整大小并不是日常环境中的常见情况。对于您的目的，使用picture element（使用some approach使其与旧浏览器兼容）可能更好，正如@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-当您使用图像的虚拟生成器之一时，在图像链接的末尾使用斜线，然后在将图像与其大小绑定之前的空间，这已由图像生成器站点翻译为文本在图像上，您需要将代码更改为以下内容，与您提到的示例链接中说明的相同

--shallow-clone

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" />

备注 - ＆gt; 将您的图片称为 image.jpg ，然后它会更有效。

img没有响应srcset指定的维度

3 个答案: