2

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

  1. 横幅-long@2x.jpg (2880x640)
  2. 横幅-long.jpg (1440x320)
  3. 横幅-short@2x.jpg (1440x640)
  4. 横幅-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) 认为它已经下载了更高分辨率的版本，因此它不会费心加载较小的版本。然而，拥有更小版本的全部意义在于纵横比更适合移动设备（即纵横比更小）。我想强制加载较小的图像资产

有没有办法做到这一点？

4

2 回答 2

5

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

<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>
于 2015-08-16T10:44:03.513 回答
1

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

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

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

于 2015-08-10T18:34:55.027 回答