13

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

我已经尝试了下面的代码，但 sizes 属性似乎并没有像你想象的那样。以下负载适用1024.jpg于所有屏幕尺寸：

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

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

4

3 回答 3

15

另一个答案并不令人满意。通常，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==" 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

于 2015-03-29T12:55:31.307 回答
4

有一个非常简单的解决方案，无需<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 px 图像，这意味着它不会在那里下载。

一个警告： 在以下情况下，我相信浏览器可能会决定使用 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 图像也可以很容易地解决这种情况, 在任何情况下你都可能会这样做

于 2015-08-17T13:18:02.057 回答
3

编辑：

简单地说，你不能。

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

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

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

srcset

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

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

img为了向后兼容，在元素的src属性中指定了 URL 之一。在新的用户代理中，当属性使用描述符 时，该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"正在告诉浏览器：

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

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

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

<img 
  src="default.jpg"
  srcset="default.jpg 768w, img/1024.jpg 1024w" 
  sizes="(max-width: 768px) 768px, 100vw"
/>
于 2014-10-26T17:04:38.363 回答