Question

我需要一个横幅，以横跨多种屏幕尺寸显示全宽。为实现这一目标，我有4个版本的横幅图片。

banner-long@2x.jpg(2880x640)
banner-long.jpg（1440x320）
banner-short@2x.jpg（1440x640）
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元素。在那里，您可以使用具有媒体属性的源元素。

<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总是不同的。

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

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

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

2 个答案: