如何使用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.此外,您必须添加类lazyload.

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

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

关于lazySizes的一个好处是,这个懒惰的加载器检查浏览器当前是否正在大量下载并决定这个事实,无论是仅下载视图图像还是预加载视图图像附近.

但是如果你不想要这个,你可以通过设置lazySizes expand和expFactor选项来控制它.