如何使用 srcset 延迟加载图像？

Question

我正在使用 slick.js 构建轮播。但是，即使我将属性从 src 更改为 data-lazy，图像仍然会在我滚动到该图像之前加载。我怀疑这是因为我的图片中有 srcset 标签。我的问题是如何防止浏览器加载响应图像或如何正确地对响应图像进行延迟加载。

这是我的 img 标签的示例

<img data-lazy="better_me.jpg" srcset="better_me.jpg 400w, better_me.jpg 200w" class="avatar photo avatar-200" alt="better_me" width="200" height="200" sizes="(min-device-resolution: 1.6) 400px, 200px">

Answer 1

lazySizes 工作正常。但是，您需要将标记更改为类似这样的内容。

<img data-src="better_me.jpg" data-srcset="better_me2.jpg 400w, better_me.jpg 200w" class="avatar photo avatar-200 lazyload" data-sizes="auto" alt="better_me" width="200" height="200" />

注意srcset改为data-srcset，data-lazy改为data-src。此外，您必须添加 class 惰性加载。

您的 sizes 属性没有太大意义。也许您想改用 x 描述符？或者干脆使用 sizes="200px"？我不知道。我只是将它切换为 data-sizes="auto"，因此它会自动为您计算。（但在那种情况下，必须在加载图像之前计算图像尺寸。）

lazySizes 确实会在之前加载图像。这对用户体验来说是一个很大的改进。将内容滚动到视图中的用户不想等待。延迟加载程序在图像已经出现后开始下载图像会破坏用户体验。

lazySizes 的一个好处是，这个延迟加载器会检查浏览器当前是否正在大量下载并根据这一事实做出决定，是只下载视图图像还是预加载近景图像。

但是如果您不想要这个，您可以通过设置 lazySizes 的 expand 和 expFactor 选项来控制它。

Answer 2

我推荐responsivelyLazy。该实现对 SEO 友好，不会弄乱您的 HTML 代码。这是一个片段：

<div class="responsively-lazy" style="padding-bottom:68.44%;">
<img
    alt=""
    src="images/2500.jpg"
    srcset="data:image/gif;base64,R0lGODlhAQABAIAAAP///////yH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=="
    data-srcset="images/400.jpg 400w, images/600.jpg 600w, images/800.jpg 800w, images/1000.jpg 1000w, images/1500.jpg 1500w, images/2000.jpg 2000w"
/>

如您所见，src 属性中的值未被修改。

在 http://ivopetkov.com/b/lazy-load-responsive-images/

阅读更多内容

Answer 3

通常，要在 HTML 中实现延迟加载，而不是 src 或 srcset 属性，我们使用 data-src 或 data-srcset 以便浏览器在推测解析期间不加载图像。稍后，当 Javascript 被执行，并且用户滚动到图像元素附近时，我们加载实际图像并更新 src 或 srcset 属性的值。

两个非常流行的延迟加载库lazysizes and vanilla-lazyload开箱即用地支持响应式图像。

这里有几个使用 lazysizes 的例子。

在 srcset 和大小中延迟加载响应图像

<img
    sizes="(min-width: 1000px) 930px, 90vw"
    data-srcset="small.jpg 500w,
                 medium.jpg 640w,
                 big.jpg 1024w"
    data-src="medium.jpg"
    class="lazyload" />

在延迟加载中使用低质量占位符

<img
    src="low-quaity-placeholder.jpg"
    sizes="(min-width: 1000px) 930px, 90vw"
    data-srcset="small.jpg 500w,
                 medium.jpg 640w,
                 big.jpg 1024w"
    data-src="medium.jpg"
    class="lazyload" />

延迟加载图片元素中的图片

<picture>
      <source
          data-srcset="500.jpg"
          media="(max-width: 500px)" />
      <source
          data-srcset="1024.jpg"
          media="(max-width: 1024px)" />
      <source
          data-srcset="1200.jpg" />
      <img src="fallback-image.jpg"
          data-src="1024.jpg"
          class="lazyload"
          alt="image with artdirection" />
</picture>

您可以从本指南中了解有关响应式图像的更多信息 - https://imagekit.io/responsive-images

如何使用 srcset 延迟加载图像？

How to do lazy loading image with srcset?

javascript

jquery

html

css

slick.js

在 srcset 和大小中延迟加载响应图像

在延迟加载中使用低质量占位符

延迟加载图片元素中的图片