5 Simple Steps of implementation for Lazy Loading on your website

How does lazy loading work and its implementation?

In simple words when a user opens any website and that website consists of images then its obvious that it will take some time for the images to be of high resolutions then the developer uses a lazy loading feature by which when the user opens the website all images will not be server until the user will scroll to that section.

Implementation

To implement lazy loading on a website you can get many tutorials on youtube and blogs in this article we will use a library named LOZAD. This library can handle images as well as videos. To implement it follow the below steps.

Step:1 Go to URL and Copy CDN

<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/lozad/dist/lozad.min.js"></script>

Read More:- https://github.com/ApoorvSaxena/lozad.js

Step 2: Create a website and paste the CDN 

Step 3: Add some content and images to the website

Here we are using two images in the next step we will use Lozad

Step 4: Add Class to Img Tag “lozad” and change the src attribute to data-src

Step 5: Init the Lozad Function and scroll to see the magic

Conclusion -  Lazy Loading

In conclusion, from the above steps we learn and explore how we can implement lazy loading in our website for fast serving, we have also attached the links (git hub) by which you can explore more about this library. So now make your website cool with this feature and comment on how this article helps you.