Lazy Loading? and How to use?
If you are a web developer Lazy Loading is a good approach to load the data over the Browser and by lazy loading even you can improve the page speed.
Lazy Loading is also called on-demand loading for the web also it is a strategic delay of loading some assets until they are needed, usually based on user activity or navigation.
Instead of loading entire content on the browser like (Images, Video, and the content) in one go, and render into the user, the concept of lazy loading help you in loading only the required section and delays the remaining until it is needed by the user.
For example whenever you search on Google Search Images sections, so all the images will load based on user activity.
How to use Lazy Loading in Website?
One of those methods is using a JavaScript library (lazysizes, lozad.js, etc.)to handle the lazy loading for you. You don’t have to write any code. All you have to do is use the right parameters in the right places in the library.
Lazysizes Lazy loading example:
<script src="http://afarkas.github.io/lazysizes/lazysizes.min.js"></script><!-- Let's load this in-viewport image normally -->
<img src="hero.jpg" alt="…"><!-- Let's lazy-load the rest of these images -->
<img data-src="a.jpg" alt="…" class="lazyload">
<img data-src="b.jpg" alt="…" class="lazyload">
<img data-src="c.jpg" alt="…" class="lazyload">
<img data-src="d.jpg" alt="…" class="lazyload">
<img data-src="e.jpg" alt="…" class="lazyload">
<img data-src="f.jpg" alt="…" class="lazyload">
By using loading attribute
But recently Chrome Developers team had announced new attribute loading` for implementing lazy loading for <img />` and <iframe></iframe>` tag in Google Chrome 76.
Now you can achieve lazy loading in your web app by using loading` attribute. here is the sample example:
Enable lazy loading feature in your chrome by using:
chrome://flags/#enable-lazy-image-loading
<img src="imageName.png" loading="lazy" alt="…" width="500" height="500"><iframe src="https://vrijraj.xyz" loading="lazy"></iframe>
Supported values for the loading attribute:
auto: Default lazy-loading behavior of the browser, which is the same as not including the attribute.lazy: Defer loading of the resource until it reaches a calculated distance from the viewport.eager: Load the resource immediately, regardless of where it's located on the page.
For improving the lazy loading feature, make sure to add height and width attributes to the <img> element or specify their values directly in an inline style:
<img src="..." loading="lazy" width="200" height="200">
<img src="..." loading="lazy" style="height:200px; width:200px;">and also you can add intrinsicsize the attribute, so images will lazy-load correctly if intrinsicsize is specified along with one other dimension (width or height).
<img src="imagename" alt="…" loading="lazy" intrinsicsize="250x200" width="450">
<!-- lazy-loaded -->if you like this, click the 💚 below. Keep watching this page and follow me.
Thanks!
Happy Coding!!
