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

Question

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

我已经尝试了下面的代码,但尺寸属性似乎没有你想到的.以下加载1024.jpg所有屏幕尺寸:

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

或者是图片元素,如果它会尊重空的srcset,但它只是"暗示"浏览器应该加载哪个图像.

Answer 1

另一个答案并不令人满意.通常,srcset您可以为浏览器选择一个候选图像.虽然您可以假设在某些设备上拍摄了哪些图像.你没有任何控制权.每张图片srcset都可以拍摄.

因此,如果要控制,使用或不使用的内容,则需要使用该picture元素.

这里有3个例子.如果视口是768px或更宽,则下载'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==" alt="Image">
</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" alt="Image">
</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 alt="Image">
</picture>

虽然第一个和第二个代码示例绝对有效.目前有一些讨论允许通过简单地省略srcset(参见代码示例2).请在此处查看此讨论:https://github.com/ResponsiveImagesCG/picture-element/issues/243

Answer 2

编辑：

简单地说，你不能。

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

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

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

源集

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

根据最新的规范，它只会在填充时从该列表中进行选择：

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

因此，它认为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"正在告诉浏览器：

“如果视口大于 768 像素，图像将为768像素宽，否则，当视口小于 768 像素时，图像将为全宽。”

我假设当视口小于 768px 时您不想使用 1024px 图像。

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

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