Simple Lazy Loader For Images & Backgrounds - lwcLazyLoader.js

File Size: 6.31 KB
Views Total: 1240
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
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.


  // 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" 
         Lazy Load Bacground Image

<img class="lazy-load"

4. Override the default data attributes.


  dataSelector: 'data-lazyload',
  dataLoadedSelector: 'data-lazyloaded',
  dataCSSSelector: 'data-lazyload-css',

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


  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.