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="/?originalUrl=https%3A%2F%2Fwww.jqueryscript.net%2F%26quot%3Bhttps%3A%2F%2Fpicsum.photos%2F1400%2F700%2F%3Frandom%26quot%3B%2520%2F%26gt%3B%2520%2520%26lt%3Bimg%2520data-src%3D%26quot%3Bhttps%3A%2F%2Fpicsum.photos%2F1200%2F600%2F%3Frandom%26quot%3B%2520%2F%26gt%3B%2520%2520...%26lt%3B%2Fdiv%26gt%3B%253C%2Fpre">
2. Import jQuery JavaScript library and the jQuery hbaLoadImages.js plugin into the document.
<script src="/?originalUrl=https%3A%2F%2Fwww.jqueryscript.net%2F%26quot%3Bhttps%3A%2F%2Fcode.jquery.com%2Fjquery-1.12.4.min.js%26quot%3B%2520%2520%2520%2520%2520%2520%2520%2520%2520integrity%3D%26quot%3Bsha384-nvAa0%2B6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc%2Fr8MhnRDZ%26quot%3B%2520%2520%2520%2520%2520%2520%2520%2520%2520crossorigin%3D%26quot%3Banonymous%26quot%3B%26gt%3B%26lt%3B%2Fscript%26gt%3B%26lt%3Bscript%2520src%3D%26quot%3Bjquery.hbaLoadImages.js%26quot%3B%26gt%3B%26lt%3B%2Fscript%26gt%3B%253C%2Fpre">
3. The JavaScript to defer the image loading with this plugin.
$('.deferred-loading').hbaLoadImages({
  attribute: 'data-src',
  onSuccess: function(source, element) {
    element.src="/?originalUrl=https%3A%2F%2Fwww.jqueryscript.net%2Fsource%3B%2520%2520%257D%257D)%3B%253C%2Fpre">
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.





Prev: jQuery Plugin For Ajaxifying Your Website - Ajaxify 
Next: Skeleton Loading Screen With jQuery And CSS3 - avnSkeleton