Lazy Load using Lazy Sizes on all your web designs
I’m not a web developer, however, sometimes I find very interesting and useful tools for websites. And yesterday I found a ‘lazy load’ library called Lazy Sizes. Its written in VarnillaJS and is very performant for any Lazy Load process, it can be applied to normal images, responsive images, iframes and/or scripts.
How does Lazy Sizes work?
One of the good things of lazy size is the fact that you don’t need more than the main library, no big plugin or web installations are needed, just put it into your code, place the class inside your web elements and that’s all. Example:
<script src="lazysizes.min.js" async=""></script>
Lazy loading examples using Lazy sizes:
<img class="lazyload" data-src="image.jpg" alt="Your image" />
Now, what about responsive images? Just use ‘data-srcset’ attribute and your responsive images will be lazy loaded without any problem, example:
<img alt="responsive image" src="small.jpg" sizes="(min-width: 1000px) 930px, 90vw" data-srcset="small.jpg 500w, medium.jpg 640w, big.jpg 1024w" class="lazyload" />
Lazy load for Iframes? Yes, that’s possible too with Lazy Sizes, example:
<iframe data-src="//www.youtube.com/watch?v=3Y46yorcd5Q" class="lazyload" frameborder="0" allowfullscreen></iframe>
You can download this library from the author page @ Github.