html - 当视口(viewport)小于特定大小时，如何告诉 srcset 属性不加载图像

Question

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

我试过下面的代码，但 sizes 属性似乎与您想象的不一样。下面在所有屏幕尺寸上加载 1024.jpg:

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

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

Answer 1

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

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

这里有 3 个例子。如果视口(viewport)为 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