Question

我正在使用html5图片代码加载相应的图片：

<picture>
    <source srcset="/path/to/image-450x450.jpg" media="(min-width:768px)">
    <source srcset="/path/to/image-600x600.jpg" media="(min-width:600px)">
    <source srcset="/path/to/image-450x450.jpg" media="(min-width:450px)">
    <img src="/path/to/image-224x224.jpg" alt="Alt text here">
</picture>

在我的电脑上，这会加载第一个source图像。在我的平板电脑上，它会加载第二张source图片，然后加载第一张source图片。

我已经在开发者模式下将平板电脑插入电脑，这样我就可以检查元素并从电脑上查看网络标签。

这就是我了解平板电脑首先加载大图像，然后是正确的图像。

我已阅读过浏览器将应用第一个匹配的source属性的media。

令人沮丧的是，我在其他页面上有picture个元素并且他们正在正确加载图像，那么为什么这个元素的表现方式不同呢？我该如何解决？

我已将媒体查询更改为不同的值，但浏览器似乎在第一次传递时忽略它。

我已经禁用了javascript，以防插件被责备。

我想也许浏览器预先获取了第二张图片，因为屏幕高度低于600px所以我做了$(window).width()的警报，它是800px所以这也不是答案。

我在运行android 4.2.2的Galaxy Tab 2上使用Chrome 45.0.2454.94。

我只能假设其他浏览器/设备有类似问题，但我无法在这些设备上进行测试。我希望如果我在这个浏览器/设备上解决问题，那么它“应该”修复在其他浏览器/设备上......

如何在Android上获取chrome以加载正确的图片元素？

[编辑]

我还实施了PictureFill，看看是否有帮助。它没有。

Answer 1

我相信你已经遇到browser bug（抱歉：/）。它应该在Chrome 46中修复，目前处于测试版频道。

您可以使用Chrome测试版进行测试，并确认它确实为您修复了该问题吗？

图片代码在Android上的Chrome上使用了错误的来源

1 个答案: