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

我正在用它建造一个旋转木马。但是，即使我将属性从

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">

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

<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类

您的

size

属性没有太大意义。也许你想用x描述符来代替？或者只需使用

size=“200px”

？我不知道。我只是简单地将它切换到

data size=“auto”

，所以它会自动为您计算。（但在这种情况下，必须在加载图像之前计算图像尺寸。）

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

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

但是如果您不想这样做，可以通过设置lazySizes的

expand

和

expFactor

选项来控制。该实现是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

属性中的值未修改

---

阅读更多关于的内容通常，为了在HTML中实现延迟加载，我们使用

data src

或

data srcset

属性，而不是

srcset

属性，以便浏览器在推测性解析期间不加载图像。稍后，当执行Javascript时，用户在image元素附近滚动，我们加载实际图像并更新

src

或

srcset

属性的值

两个非常流行的延迟加载库，支持即时响应图像

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

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

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

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

---

您可以从本指南中了解有关响应图像的更多信息-

您可以尝试查看这里：我尝试了lazysizes。但是在显示图像之前，图像仍然会被加载。对于srcset，可以使用

data:，x

代替编码的gif（不验证）