做最新的Chrome/Opera获取srcset错误？

我工作具有以下的标记在页面上：做最新的Chrome/Opera获取srcset错误？

<img 
alt="" 
src="/banner_home.300x200.jpg" 
srcset="/banner_home.300x200.jpg 320w, 
     /banner_home.600x400.jpg 480w, 
     /banner_home.728x242.jpg 768w, 
     /banner_home.920x306.jpg 960w, 
     /banner_home.1234x400.jpg 1280w">

，似乎在最新的Chrome &歌剧，他们忽略任何屏幕尺寸，只是输出哪个文件被列为最后的（所以在我的情况下是1234x400.jpg）。

使用Picturefill，Firefox和Safari都能在较小的屏幕上显示正确的图像。

在我今天测试的过程中，我推出了一段时间没有打开的Opera。当它第一次启动时，它是在第25版，它会在较小的屏幕尺寸下显示正确的图像。

然后我注意到一个更新已经下载了，所以我运行它，更新到v27，然后Opera显示与最新的Chrome相同的问题。

因此，最近似乎在Blink中发生了一些变化。

其他人可以证实这一点，或者我只是做错了吗？

Codepen说明我的意思。

来源

2015-02-06 Tyssen

你拿着测试是错误的：d

一个change是进入Chrome的40意味着，当一个高密度的资源可用在高速缓存中（例如，在您的例子中，最大的图像），这是会被选中的资源，因为重新下载不同的，更低分辨率的资源没有意义。

如果你真的想测试哪些资源在较小的设备上下载（不是你应该依靠哪个资源被选中，因为srcset不是这样的），你可以在实际设备上测试，或者打开隐身会话，调整浏览器的大小（或模拟设备），然后才加载测试页面。

我也创建了一个slightly clearer test case，当你可以看到哪个图像被加载。

另外：从你的例子看来，你正在srcset中使用不同比例的图像。这不是你应该使用srcset，而是使用<picture>，提供关于哪些资源被加载的担保，所以你的布局不会因为加载了错误的图像而中断。

当您使用srcset时，没有“错误”的图像。浏览器可以自由选择它认为合适的一个（因为它在缓存中，连接性低，用户偏好等等）。

来源

2015-02-06 14:55:38

如果您将其粘贴到您的控制台中，您将看到在浏览器中呈现的图像源。（'。your-image-class img'）。prop（'currentSrc'））;}}

来源

2015-02-17 15:33:48 starryeyez024

做最新的Chrome/Opera获取srcset错误？

回答

相关问题