Simple Lazy Loader For Images & Backgrounds - lwcLazyLoader.js

lwcLazyLoader.js is a small jQuery based lazy loader to improve page performance by lazy loading images and background images within the document.

How to use it:

1. Insert the minified version of the jQuery lwcLazyLoader.js plugin after jQuery.

<script src="/path/to/jquery.min.js"></script>
<script src="/path/to/lwcLazyLoader.min.js"></script>

2. Initialize the plugin and we're ready to go.

$('html').lwcLazyLoad({

  // selector REQUIRED
  selector: '.lazy-load'
  
});

3. Add the CSS class lazy-load to images or container elements and specify the image/background paths in the data-lazyload attribute. For lazy loading background images, make sure to set the data-lazyload-css to TRUE.

<section class="lazy-load" 
         data-lazyload="bg.jpg" 
         data-lazyload-css="true">
         Lazy Load Bacground Image
</section>

<img class="lazy-load"
     data-lazyload="sample.jpg"
>

4. Override the default data attributes.

$('html').lwcLazyLoad({

  dataSelector: 'data-lazyload',
  dataLoadedSelector: 'data-lazyloaded',
  dataCSSSelector: 'data-lazyload-css',
  
});

5. Callback functions which will be fired on element load & loaded.

$('html').lwcLazyLoad({

  onElementLoad: function(el) {
    // ...code
  },
  onElementLoaded: function(el) {
    // ...code
  }
  
});

---

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