Asynchronous Image Loading with jQuery - hbaLoadImages.js

File Size: 5.76 KB
Views Total: 2103
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
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="" />
  <img data-src="" />

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

<script src="" 
<script src="jquery.hbaLoadImages.js"></script>

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

  attribute: 'data-src',
  onSuccess: function(source, element) {
    element.src = source;

4. More callback functions.


  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.