How to use jQuery Lazy Load library to load the images on your web page

You may have across websites where the images take a lot of time to load and there by affecting page load speed and time. If your page loads slowly then it will affect user experience and visitors may not wait that long for your website to open. At the same time Google too does not like slow loading websites and ultimately the position of those websites on Google is affected.

How do you improve page load time?

However fear no more as you now get the option to load images at their own pace without affecting page load. Enter the jQuery Lazy Load library.

What does this library do?

This library helps speed up page load times by only loading the content in view. This means that resources are loaded as they are required when the visitor scroll downs the page and not completely in one go.

How to set this library up on your webpage?

1. Download the latest library from their website.
2. Reference the library on your web page in the head section.
3. Add the lazy class to all the img tags you want to lazy load on the web page.
4. Change the img src attribute to data-original attribute.
5. Run the web page and if every thing has been added properly then you should see the benefit of lazy loading.

If you would like to download the code for this sample then please click here.

Hope the above helped to understand the concept.

Be the first to comment

Leave a Reply