Geek Answers Handbook

How to make lazy loading image using srcset?

I use slick.js to build a carousel. However, although I am changing the attribute from src to data-lazy , the images are still uploaded before I go to that image. I suspect this is because there is an srcset tag in my image. My question is how to prevent the browser from downloading a responsive image or how to do lazy loading for responsive images properly.

This is a 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">
+7
javascript jquery html css
source share
2 answers

lazySizes is working fine. However, you need to change your markup to something similar.

 <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 srcset changed to data-srcset , and data-lazy changed to data-src . In addition, you must add the lazyload class.

Your sizes attribute doesn't make much sense. Maybe you want to use x descriptors instead? Or just use sizes="200px" ? I dont know. I just switched it to data-sizes="auto" , so it is automatically calculated for you. (But in this case, the image size must be computable before loading the image.)

lazySizes really loads the images before they receive. This is a big improvement for users. A user who scrolls something in mind does not want to wait. Lazyloader, which starts loading the image after it is already in view, disrupts the user.

One nice thing about lazySizes is that this lazy bootloader checks to see if the browser is currently loading and resolving this fact, whether it only downloads as images or preloads images at close range.

But if you do not want this, you can control this by setting the lazySizes expand and expFactor .

+8
source share

I recommend responsivelyLazy . The implementation is SEO-friendly and will not ruin your HTML code. Here is a snippet:

 <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 src attribute does not change.

More details at http://ivopetkov.com/b/lazy-load-responsive-images/

+1
source share

More articles:


All Articles