Asynchronous Image Loading with jQuery - hbaLoadImages.js

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.

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.

  • Publication date: 09.12.2017
  • Source