Loading....

5 Simple Steps of implementation for Lazy Loading on your website

August 21, 2023

Introduction

In this article we will learn what is lazy loading, how it works and its implementation So the question is what is lazy loading the answer is in the question “It is Lazy” 😊 This means it has a tendency to load the images of the website after the website is fully served to the user. So suppose that you have a website in which many images are placed and they are of high resolutions then it will take time to serve because of images and users may get frustrated. So the developer will implement the lazy load and after this website will load fast when the user will scroll to the next section,if in that section any image will be there then it will be seen otherwise not.

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.

Leave a Reply

Alert