Speed Up Your Webpage By Lazy Loading Images - jQuery lazy-load

Yet another jQuery based image lazy load plugin to speed up your web page & web app by lazy loading certain images as they enter the viewport.

The plugin loops through all images and replaces the value of the native src attribute with the data-src attribute, then it removes the src attribute completely to avoid (cancel) image loading.

For Google Chrome users, you can use the Native Lazy Loading to lazy load images within the document:

<img src="jqueryscript.jpg" loading="lazy" alt="..." />

How To Use It:

1. Load the script lazy-load.js after loading the latest jQuery library.

<script src="/path/to/jquery-3.4.1.slim.min.js"></script>
<script src="/lazy-load/js/lazy-load.js"></script>

2. Define the image path in the data-src attribute.

<ul id="myList">
  <li><img data-src="1.jpg"></li>
  <li><img data-src="2.jpg"></li>
  <li><img data-src="3.jpg"></li>
  <li><img data-src="4.jpg"></li>
  <li><img data-src="5.jpg"></li>
  ...
</ul>

3. Attach the function to the image container and done.

$(function(){
  $('#myList').lazyLoad();
});

4. The plugin will automatically add the CSS class '.loaded' to the image which has been completely loaded. So that you can apply a custom CSS animation to the image as follows.

ul.lazy-load li img {
  display: block;
  opacity: 0;
  width: 100%;
  transform: translateY(25%);
}

ul.lazy-load li img.loaded {
  opacity: 1;
  transform: translateY(0);
  transition: all .5s ease;
}

---

This awesome jQuery plugin is developed by pulamc. For more Advanced Usages, please check the demo page or visit the official website.