为什么srcset会导致图像下载多次？

问题描述：

我必须使用srcset和sizes属性插入响应图像下面的图片标签：为什么srcset会导致图像下载多次？

<img srcset="/designed/logo-abihaus-1600x500.png 1600w, 
      /designed/logo-abihaus-1200x375.png 1200w, 
      /designed/logo-abihaus-960x300.png 960w, 
      /designed/logo-abihaus-800x250.png 800w, 
      /designed/logo-abihaus-480x150.png 480w" 
     src="/designed/logo-abihaus-1600x500.png" 
     sizes="100vw" alt="">

据我了解，我只是告诉浏览器所有的图像尺寸我有可用，它应该下载只有基于视口大小的最合理的大小等。如果我调整我的浏览器窗口（Chrome）的大小并刷新页面，网络选项卡告诉我，它下载我期望的图像（在这种情况下是800px），加上最大的图片（我从src属性中假设）。

我一直有和没有picturefill.js尝试这样做，我使用的是Chrome 45在OS X 10.10.5，所以我不认为这是一个浏览器兼容性问题。我的语法有些不可思议，还是我误解了srcset？

@海怪请参考这个[链接]（http://www.smashingmagazine.com/2014/05/picturefill-2-0-responsive-images-and-the-perfect-polyfill/） – Webruster

@Webruster ，链接文章的第一个例子[无效]（https://html.spec.whatwg.org/multipage/embedded-content.html#the-img-element:image-candidate-string-7）：“对于具有与同一元素的另一图像候选字符串的像素密度描述符值相同的像素密度描述符值的元素，一定不能有图像候选字符串。“ – Kaiido

无法在FF上重现，也无法在Chrome 45上重现OsX 10.9 – Kaiido

答

这是Blink渲染引擎中的浏览器错误。

如果你在你的HTML一个<meta name=viewport content="width=device-width">标签时，bug应固定在Chrome 46

如果不这样做，这是一个仍然打开bug，我希望能尽快解决。

我已经有了 in所以我想我只需要等到Chrome 46。 –

等待时间不应该太长。根据Chrome的发布时间表，我认为Chrome 46应该在下周左右达到稳定（除非发布版本中存在其他主要问题） –

请问您是否可以确认Chrome的测试版本中不再出现您遇到的问题？ –

为什么srcset会导致图像下载多次？

相关推荐