Asynchronous Image Loading with jQuery - hbaLoadImages.js

hbaLoadImages.js is a jQuery asynchronous image loading plugin to improve page speed and boost SEO that defers the loading of images until your web content is fully loaded.

How to use it:

1. Embed your images into the document using data-src attribute instead.

<div class="deferred-loading">
  <img data-src="https://picsum.photos/1400/700/?random" />
  <img data-src="https://picsum.photos/1200/600/?random" />
  ...
</div>

2. Import jQuery JavaScript library and the jQuery hbaLoadImages.js plugin into the document.

<script src="https://code.jquery.com/jquery-1.12.4.min.js" 
        integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" 
        crossorigin="anonymous">
</script>
<script src="jquery.hbaLoadImages.js"></script>

3. The JavaScript to defer the image loading with this plugin.

$('.deferred-loading').hbaLoadImages({
  attribute: 'data-src',
  onSuccess: function(source, element) {
    element.src = source;
  }
});

4. More callback functions.

$('.deferred-loading').hbaLoadImages({

  onError: function(message, source, element){
    // on error
  },

  onComplete: function(source, element){
    // on complete
  },

  onQueueComplete: function() {
    // executed once when all the images in the queue has been processed.
  }
  
});

---

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