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

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

lazySizes确实加载了之前的图像。这是对用户体验的重大改进。将某些内容滚动到视图中的用户不想等待。在视图已经处于视图中之后开始下载图像的lazyloader会破坏用户体验。

关于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和vanilla-lazyload支持开箱即用的响应式图像。

以下是一些使用惰性大小的示例。

在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延迟加载图像？

3 个答案:

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

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

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