当视口小于特定大小时，如何告诉 srcset 属性加载 NO 图像

Posted 2023-03-05

【中文标题】当视口小于特定大小时，如何告诉 srcset 属性加载 NO 图像

【英文标题】：How do I tell srcset attribute to load NO images when viewport smaller than certain size

【发布时间】：2014-12-21 20:32:40

【问题描述】：

我无法理解如何阻止srcset 在屏幕上加载任何图像768px。

我已经尝试了下面的代码，但 size 属性似乎并没有按照您的想法进行。 下面在所有屏幕尺寸上加载1024.jpg：

<img 
  src="default.jpg"
  srcset="img/1024.jpg 1024w" 
  sizes="(min-width: 768px) 768px, 100vw"
/>

或者图片元素，如果它支持empty srcset，但它只“提示”浏览器应该加载哪个图像。

【参考方案1】：

另一个答案并不令人满意。通常使用srcset，您可以让浏览器选择图像候选者。虽然您可以假设哪个图像是在某些设备上拍摄的。你没有任何控制权。 srcset中的每张图片都可以拍摄。

所以如果你想控制，使用什么，什么不使用，你需要使用picture元素。

这里有 3 个例子。如果视口为 768 像素或更宽，则下载“img/1024.jpg”图像，否则选择数据 uri 或损坏的img。

<picture>
  <!--[if IE 9]><video style="display: none;"><![endif]-->
  <source srcset="img/1024.jpg" media="(min-width: 768px)">
  <!--[if IE 9]></video><![endif]-->
  <img src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" >
</picture>

<picture>
  <!--[if IE 9]><video style="display: none;"><![endif]-->
  <source srcset="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" media="(max-width: 768px)">
  <!--[if IE 9]></video><![endif]-->
  <img src="img/1024.jpg" >
</picture>

<!-- you can also write (but this makes it invalid) -->

<picture>
  <!--[if IE 9]><video style="display: none;"><![endif]-->
  <source srcset="img/1024.jpg" media="(min-width: 768px)">
  <!--[if IE 9]></video><![endif]-->
  <img >
</picture>

虽然第一个和第二个代码示例是绝对有效的。目前有一些讨论通过简单地省略 srcset 来允许这样做（参见代码示例 2）。在此处查看此讨论：https://github.com/ResponsiveImagesCG/picture-element/issues/243

【讨论】：

优秀的评论@alexanderfarkas。我希望如果一个特定的 srcset 是空的，那么这就是将呈现的内容......一个空的 img src......不明白为什么它不会。

什么是指定的空srcset？

我知道这是一个旧线程...但是 IE 呢？ Emppy img 意味着在那些不支持 的旧浏览器上根本不会有任何图像。

@JavRok 您可以根据需要制作图片。您可以在 IE 中使用 img[src] 并根据需要使用 img[srcset] 覆盖它。

【参考方案2】：

有一个非常简单的解决方案可以在没有<picture> 的情况下工作。 它可能不打算以这种方式使用，但效果很好。

附加一个 1x1px 的图片，只要 size == 0vw 就会使用它。在这种情况下，这对于 768 像素以下的所有内容都是如此：

<img 
  src="default.jpg"
  srcset="img/null.jpg 1w
          img/1024.jpg 1024w" 
  sizes="(max-width: 768px) 0vw, 100vw"
/>

我知道这并没有回答 OP 的“加载 NO 图像”的问题，但它相对接近，您可以在所有其他情况下引用相同的 1x1 像素图像，这意味着它不会在那里下载。

一个警告： 在以下情况下，我相信浏览器可能会决定使用 512px 及以下的 1x1px 图像，即使我们指定 100px

<img 
  src="default.jpg"
  srcset="img/null.jpg 1w
          img/1024.jpg 1024w" 
  sizes="(max-width: 100px) 0vw, 100vw"
/>

这是因为浏览器在这种情况下采用最接近所需大小的值 1 比 1024 更接近 511...虽然不确定 编辑：这种情况很容易通过附加 200w 图像来解决，无论如何您都可能会这样做

【讨论】：

这违反了规范，并且没有考虑 chrome 缓存的候选选择。您需要使用图片。

是的，您需要图片有几个原因。此外，这仍然需要一个 http 请求......我实际上已经把这个问题带到了构建图片元素规范的推动者和震动者身上。

【参考方案3】：

编辑：

简单地说，你不能。

移除/隐藏图像元素必须在 CSS 中完成 使用媒体查询或 javascript。

srcset 和sizes 标签对于选择图像元素的内容源很有用，但它不能控制元素的存在或可见性。

srcset 和 sizes 标签旨在增强响应式 CSS。它们的值应遵循 CSS 中定义的任何断点。

---

srcset

srcset 是可用图像的列表，浏览器可以选择它们各自的宽度。

根据latest spec，它只会在填充时从该列表中选择：

为了向后兼容，img 元素的src 属性中指定了其中一个 URL。在新的用户代理中，当srcset 属性使用w 描述符时，src 属性将被忽略。

因此，它将1024.jpg 视为唯一选择并忽略default.jpg。

将默认图像添加到 srcset（使用正确的 w 描述符 - 这里我假设 default.jpg 为 768px 宽）：

<img 
  src="default.jpg"
  srcset="default.jpg 768w, img/1024.jpg 1024w" 
  sizes="(min-width: 768px) 768px, 100vw"
/>

---

尺寸

sizes 告诉浏览器当给定媒体查询为真时图像的宽度。这有助于浏览器计算从srcset 中选择哪个图像。

目前，sizes="(min-width: 768px) 768px, 100vw" 正在告诉浏览器：

"如果视口大于 768px，则图像将是 768px 宽，否则当视口小于 768px 时，图像将是全宽。 p>

我假设您不想在视口小于 768 像素时使用 1024 像素的图像。

要在视口小于 768px 时提示小图像，请改用max-width: 768px：

<img 
  src="default.jpg"
  srcset="default.jpg 768w, img/1024.jpg 1024w" 
  sizes="(max-width: 768px) 768px, 100vw"
/>

【讨论】：

您好，感谢您的故障，非常感谢。但是问题是“如何使用 srcset 在小于 768px 宽的屏幕上显示/下载 NO 图像”:) 可以吗？

知道了。我没有仔细阅读这个问题。检查我修改后的答案。我还编辑了更具体的问题标题。好问题。

您对尺寸的评论对我来说没有多大意义。如果您想要从 0 到 768px 的流体并固定在 768px 以获得更大的视口，那么 min-width 似乎是合适的。我想你可以有一个相反的布局，但它不会特别“适合移动设备”。 :)