时间戳

首页 > 解决方案 > 您可以将本机延迟加载属性添加到带有媒体查询的图像吗？

css - 您可以将本机延迟加载属性添加到带有媒体查询的图像吗？

问题描述

我的图像显示在桌面屏幕的首屏上方，但在较小的移动屏幕上显示在首屏下方。我希望这些图像在首屏显示时使用本机延迟加载属性。有没有办法通过媒体查询来做到这一点？谢谢

我想做的是：

CSS:
              @media screen and (max-width: 600px) {
                .lazy {
                  loading: lazy;
                }
              }

HTML:
              <img class="lazy" src="photo.jpg">

但是，看起来像这样的 CSS 方法似乎不存在，所以我正在寻找一种替代方法来完成同样的事情。

为了澄清，相同的图像在大屏幕上加载在首屏之上，在小屏幕上在首屏之下加载，我只想在图像出现在首屏之下时应用延迟加载。

标签： css

解决方案

您可以将所有图像标记为 loading="lazy" 并为它们提供适当的高度和宽度，包括您希望在折叠上方的图像，并且浏览器应该处理加载而无需您考虑太多。你不想这样做有什么特别的原因吗？

需要注意的是，为了让延迟加载正常工作，最好为所有图像提供高度和宽度。请参阅此处了解原因：

https://web.dev/browser-level-image-lazy-loading/#distance-from-viewport-thresholds

这是关于高度和宽度的 stackblitz 的快速示例

https://stackblitz.com/edit/web-platform-ps8sfq?file=index.html

一个没有

https://stackblitz.com/edit/web-platform-drlfv9?file=index.html

如果您在开发工具中打开网络选项卡并通过 img 过滤，您应该在前者上看到图像是延迟加载的，但在后者上，即使它们被标记为延迟，它们也会全部加载。

这里还有一个没有延迟加载的。如果您打开了没有过滤器的网络选项卡，您可以比较图像开始加载的位置。对我来说，它们开始出现在同一个地方，但由于延迟加载和高度/宽度，它只加载前 2 个而不是全部。

https://stackblitz.com/edit/web-platform-wjt9jn?file=index.html

推荐阅读