html - 图片填充在缓存清除时在 IE10 中不起作用

Question

我正在使用 <picture> 元素，并使用 Picturefill 来支持跨浏览器。在 IE10 中（在 9 和 11 中很好），它在普通页面加载时完美运行，但 ctrl+f5 后不显示图像。（如果我随后打开开发工具或更改缩放，以及如果我进行普通刷新，则会加载正确的图像）。

我正在使用 <picture> 如下：

<picture>
  <!--[if IE 9]><video style="display: none;"><![endif]-->
    <source srcset="http://placehold.it/360x240" media="(min-width: 640px)">
    <source srcset="http://placehold.it/240x180">
  <!--[if IE 9]></video><![endif]-->
  <img alt="" srcset="http://placehold.it/240x180">
</picture>

我已经检查了 Picturefill 的演示，甚至在一个与我使用 <picture> 和 srcset 的方式非常接近的示例中，我无法复制此问题，因此它似乎并不是纯粹的 Picturefill 错误。

有没有其他人遇到过这个问题或对如何解决它有任何建议？如果我使用 src 而不是 srcset，它似乎可以工作，但我知道不建议将 src 与 Picturefill 一起使用，因为它会在不支持 srcset 的浏览器中导致双重下载。

Answer 1

以下模式是否适合您：

<picture>
  <!--[if IE 9]><video style="display: none;"><![endif]-->
    <source srcset="http://placehold.it/360x240" media="(min-width: 640px)">
    <source srcset="http://placehold.it/240x180">
  <!--[if IE 9]></video><![endif]-->
  <img alt="">
</picture>