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.
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
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.