为什么Chrome的使用<img srcset>`

jsbin 为什么Chrome的使用<img srcset>`

img { 
 
    width: 100%; 
 
}

<img srcset="http://lorempixel.com/400/200 400w, 
 
       http://lorempixel.com/300/200 300w, 
 
       http://lorempixel.com/200/200 200w">

尝试调整功能，JS斌在Chrome〜61不断要求新的图像。图像不断变化，甚至超过400像素的标志。

Firefox OTOH更符合逻辑 - 它的分辨率为300像素和200像素，就像我所期望的一样。

400px宽是我的srcset中最宽的图片，那为什么Chrome会重新获取新图像，即使参数没有改变？

来源

2017-10-19 mpen

首先，在你的代码的几个问题：

它缺乏src属性，它是按规格强制性的，即使浏览器处理它时，它的缺失。
它缺乏sizes属性，当你在srcset使用w描述现在是强制性的，即使浏览器处理它时，它的缺失，使得它100vw。
您在srcset中列出的图像应具有相同的宽高比。如果您想使用不同的宽高比，那就是艺术指导，并且您需要使用<picture>。

但是，这些问题可能不是你麻烦的原因。

看起来确实像Chrome有问题，试图在增加视口宽度时重复查找新图像，而HTML告诉它源是srcset是最大的。

来源

2017-10-20 07:58:02

我相信这里的问题是由于您的示例中的图像具有Cache-Control: no-store指令，这使得它们绕过浏览器的内存缓存。我不清楚这里指定的行为应该是什么，但避免此问题的最佳方法是避免发送带有no-store指令的图像。假设他们不包含任何隐私敏感信息（例如银行信息），他们没有理由成为no-store。

来源

2017-10-31 10:47:23

当然，这可以解释为什么图像会在每次请求新图像时发生变化，但它仍然无法解释为什么要求首先要求新图像。 Chrome没有理由假定图像在断点之外发生了变化。 – mpen

为什么Chrome的使用<img srcset>`

回答

相关问题