7

我正在开发的网页上使用 srcset 属性。

<img src="img/picture-820x496.jpg" 
    srcset="img/picture-820x496.jpg 1200w, 
    img/picture-374x226.jpg 992w, 
    img/picture-305x185.jpg 768w, 
    img/picture-707x428.jpg 300w" />

如果我检查页面加载了哪些资源，我会看到 Chrome 41 和 FF 使用 polyfill 以及 Safari 7 总是加载图像两次——一次是完整分辨率，一次是来自 srcset 属性的相应大小。我在这里做错了什么？

4

1 回答 1

8

我遇到了类似的问题，我发现如果src图像不是图像中可用的srcset图像之一，浏览器无论如何都会加载src图像。解决方案是确保src图像 url 匹配图像 url 之一srcset。

顺便说一句 - 据我了解规范，w图像网址后面的值应该（大致）匹配图像的宽度。这允许浏览器根据sizes属性和设备像素密度最好地确定要显示的图像。因此，您可能应该更改w标记中的值并添加sizes属性（这允许您使用媒体查询和后备即让浏览器知道渲染图像的大小。(min-width: 640px) 600px, 50vw）。考虑下面的例子：

<img src="img/picture-820x496.jpg" 
    srcset="img/picture-820x496.jpg 820w,
    img/picture-707x428.jpg 707w, 
    img/picture-374x226.jpg 374w, 
    img/picture-305x185.jpg 305w"
    sizes="100vw">
于 2016-02-16T14:08:05.213 回答