It is important for any website to load its images faster for better user experience. Especially if you are running a wallpaper website which always has hundreds of images.
It also supports responsive images and perfect for an SEO point of view. Not only this but it also comes with notable features.
The use is dead simple and easy. All you need to load the library files before closing the head tab.
Next thing is to define the images. And Instead of defining the image path in default src attribute, you need to define the
<img alt="Phone One" data-original="image1.jpg" width="250" height="250"> <img alt="Phone Two" data-original="image2.jpg" width="250" height="250"> <img alt="Phone Three" data-original="image3.jpg" width="250" height="250"> <img alt="Phone Four" data-original="image4.jpg" width="250" height="250"> ...
Now we need to Initialize the lazy load functionality and for this, you need to only call one JS line of code.
If you want to customize its functionality you can do it by changing the default values of options.
// image selector elements_selector: "img", // parent container container: window, // the distance out of the viewport threshold: 300, // different thresholds thresholds: null, // data-src data_src: "src", // data-srcset data_srcset: "srcset", // date-sizes data_sizes: "sizes", // multiple background images data_bg: "bg", // default classes class_loading: "loading", class_loaded: "loaded", class_error: "error", // the time (in milliseconds) each image needs to stay inside the viewport before its loading begins. load_delay: 0, // callbacks callback_load: null, callback_set: null, callback_set: null, callback_enter: null