如何使用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">

- toy

---

你可以试着在这里看一下：http://afarkas.github.io/lazysizes/ - areim

我尝试了lazysizes。但是图片仍然在显示图像之前加载。 - toy

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。此外，您必须添加 lazyload 类。

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

lazySizes 确实会在图像进入视图之前加载图像，这对用户体验来说是一个很大的改进。当用户滚动查看内容时，他们不想等待图像加载。如果懒加载程序在图像已经进入视图后才开始下载图像，那么这会破坏用户体验。

lazySizes 的一个好处是，该懒加载程序会检查浏览器当前是否正在大量下载，并根据这个事实决定只下载视图中的图像还是预加载接近视图的图像。

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

- alexander farkas

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/

- Ivo Petkov

---

对于srcset，可以使用data：，x代替编码的gif（可以验证）。 - lucian

Answer 3

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

两个非常流行的延迟加载库lazysizes和vanilla-lazyload支持响应式图像。

以下是使用lazysizes的几个示例。

在srcset和sizes中延迟加载响应式图像

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

Using low quality placeholder in lazy loading

<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元素中的应用

<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

- manu4543