javascript 如何使用 srcset 延迟加载图像？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/31840467/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to do lazy loading image with srcset?
提问by toy
I'm using slick.jsto build a carousel. However, even though I change the attribute from srcto data-lazythe images still get loaded before I scroll to that image. I suspect that it's because I have srcsettag 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.
我正在使用slick.js构建轮播。但是，即使我将属性从src更改data-lazy为图像，在滚动到该图像之前仍然会加载。我怀疑这是因为srcset我的图像中有标记。我的问题是如何防止浏览器加载响应式图像或如何正确地对响应式图像进行延迟加载。
This is the sample of my img tag
这是我的 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">
回答by alexander farkas
lazySizesis just working fine. You need to alter your markup into something like this however.
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" />
Note srcsetis changed to data-srcsetand data-lazyis changed to data-src. Additionally you must add the class lazyload.
注释srcset更改为data-srcset并data-lazy更改为data-src。此外，您必须添加类lazyload。
Your sizesattribute 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.)
你的sizes属性没有太大意义。也许您想改用 x 描述符？还是干脆用sizes="200px"？我不知道。我只是将其切换为data-sizes="auto"，因此它会自动为您计算。（但在这种情况下，图像尺寸在加载图像之前必须是可计算的。）
lazySizes indeed loads images beforethey 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 的一个好处是，这个惰性加载器会检查浏览器当前是否正在大量下载并根据这一事实来决定它是仅下载视图图像还是预加载近视图图像。
But if you don't want this you can control this by setting the lazySizes' expandand expFactoroptions.
但是如果你不想要这个，你可以通过设置 lazySizes'expand和expFactor选项来控制它。
回答by Ivo Petkov
I recommend responsivelyLazy. The implementation is SEO-friendly and does not mess your HTML code. Here is a snippet:
我推荐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"
/>
As you can see the value in the srcattribute is not modified.
正如您所看到的，src属性中的值没有被修改。
Read more at http://ivopetkov.com/b/lazy-load-responsive-images/
