如何使用srcset延迟加载图像? [英] How to do lazy loading image with srcset?

问题描述

我正在使用 slick.js 来构建轮播.但是，即使我将属性从 src 更改为 data-lazy ，在滚动到该图像之前，图像仍然会加载.我怀疑这是因为我的图像中有 srcset 标记.我的问题是如何阻止浏览器加载响应图像或如何正确地延迟加载响应图像.

I'm using slick.js to build a carousel. However, even though I change the attribute from src to data-lazy the images still get loaded before I scroll to that image. I suspect that it's because I have srcset tag in in my image. My question is how to prevent browser to load responsive image or how to do lazy-loading for responsive images properly.

这是我的img标签的示例

This is the sample of my img tag

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

推荐答案

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

lazySizes is just working fine. You need to alter your markup into something like this however.

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

Note srcset is changed to data-srcset and data-lazy is changed to data-src. Additionally you must add the class lazyload.

您的 sizes 属性没有太大意义.也许您想改用x描述符?还是直接使用 sizes ="200px" ?我不知道.我只是将其切换为 data-sizes ="auto" ，因此将自动为您计算.(但在那种情况下，图像尺寸必须在加载图像之前是可计算的.)

Your sizes attribute didn't made too much sense. Maybe you want to use x descriptors instead? Or simply use sizes="200px"? I don't know. I simply switched it to data-sizes="auto", so it gets automatically calculated for you. (But in that case the image dimension has to be computable before the image is loaded.)

lazySizes实际上在之前加载了图像.这是用户体验的重大改进.将某些内容滚动到视图中的用户不想再等待.懒惰加载器在查看后便开始下载映像，这会破坏用户体验.

lazySizes indeed loads images before they get in view. This is a big improvement for user experience. A user, who scrolls something into view doesn't want to wait then. A lazyloader that starts downloading an image after it is already in view disrupts the user experience.

关于lazySizes的一件好事是，该惰性加载器检查浏览器当前是否正在大量下载并决定这一事实，是仅在视图图像中下载还是在视图图像附近预加载.

One nice thing about lazySizes is that this lazy loader checks whether the browser is currently heavily downloading and decides on this fact, whether it only downloads in view images or to also preload near view images.

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

But if you don't want this you can control this by setting the lazySizes' expand and expFactor options.

这篇关于如何使用srcset延迟加载图像?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！