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

通常，为了在HTML中实现延迟加载，我们不使用src或srcset属性，而是使用datasrc或datasrcset，这样浏览器在推测性解析期间不会加载图像。稍后，当执行Javascript时，用户在image元素附近滚动，我们加载实际图像并更新src或srcset属性的值。

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

下面是一些使用懒散尺寸的例子。

<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

Answer 2

我建议负责懒惰。该实现是SEO友好的，不会弄乱您的超文本标记语言代码。这里是一个片段：

<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

懒散的工作很好。但是，您需要将标记更改为类似这样的内容。

<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-l存在更改为data-src。此外，您必须添加类lazyload。

您的size属性没有太大意义。也许你想用x描述符来代替？或者简单地使用size="200px"？我不知道。我只是把它切换到data-size="auto"，所以它会自动为您计算。但在这种情况下，图像维度必须在加载图像之前是可计算的。）

lazySizes确实会在图像进入视图之前加载图像。这是对用户体验的一大改进。如果用户将某些内容滚动到视图中，则不想等待。一个懒散的加载器在图像已经在视图中之后开始下载图像，会破坏用户体验。

lazySizes的一个优点是，这个惰性加载程序检查浏览器当前是否大量下载，并根据这一事实决定是否只下载视图中的图像，还是同时预加载近视图图像。

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