使用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

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

<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>