使用 srcset 时如何强制加载低分辨率图像

Question

我需要一个横幅以在多种屏幕尺寸上全宽显示。为此，我有 4 个版本的横幅图片。

1. banner-long@2x.jpg (2880x640)
2. banner-long.jpg (1440x320)
3. banner-short@2x.jpg (1440x640)
4. banner-short.jpg (720x320)

我正在使用srcset 属性。

<img
    src="/images/interface/banner-long.jpg"
    srcset="/images/interface/banner-long@2x.jpg 2880w,
            /images/interface/banner-long.jpg 1440w,
            /images/interface/banner-short@2x.jpg 1439w,
            /images/interface/banner-short.jpg 720w">

但是，如果我从宽浏览器开始加载长版本，然后缩小浏览器的宽度，则短版本永远不会加载，因为长版本已被缓存。浏览器 (Chrome) 认为它已经下载了更高分辨率的版本，因此它不会费心加载较小的版本。然而，拥有更小版本的全部意义在于纵横比更适合移动设备（即纵横比更小）。我想强制加载较小的图片资源

有什么办法吗？

Answer 1

这不是你应该这样做的方式。你想要的是艺术指导，你需要为此使用图片元素。在那里，您可以使用带有媒体属性的源元素。

<picture>
    <source 
        srcset="/images/interface/banner-long@2x.jpg 2880w,
            /images/interface/banner-long.jpg 1440w" 
        media="(min-width: 800px)"
    />
    <img srcset="/images/interface/banner-short@2x.jpg 1439w,
            /images/interface/banner-short.jpg 720w" />
</picture>

Answer 2

如果您要动态构建此 HTML，只需将 ?t=<current unix timestamp> 附加到每个图像的 URL 即可。这样，浏览器每次都必须从服务器加载它们，因为 URL 总是不同的。

或者，您可以将网络服务器配置为在发送这些图像时发送“不缓存”标头（但这可能更困难且过于复杂）。

---

我确实质疑为此目的使用 srcsets。它可能有效，但我不确定 srcset 是完成这项工作的最佳工具，或者 srcset 是否打算以这种方式使用。如果您要切换实际图像，似乎应该通过两个不同的图像标签来完成，每个标签都有自己的 srcset（您可以以不同的分辨率显示/隐藏），或者使用某种 JS 解决方案。