Simple Lazy Loader For Images & Backgrounds - lwcLazyLoader.js

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.

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.

  • Publication date: 03.04.2019
  • Source