This is a light-weight jquery plugin that allows you load images asynchronously and provides callback for them. In addition it allows to defer the loading images resulting in faster page load time.
##Requirements## jQuery 1.4+
##Installation##
<!-- jQuery library (served from Google) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- HBA Dropdown file -->
<script type="text/javascript" src="jquery.hbaLoadImages.js"></script>##Usage##
$('div').hbaLoadImages();##Configuration Options##
$('.parent').hbaLoadImages({
selector: 'img',
//Specifies the child images to be selected under a parent tag. Works only with a parent other than image tag.
//Defaults to "img"
attribute: 'src',
//Specifies the attribute that contains the image source. Useful to defer image load.
//Deafults to "src"
debug: false,
//Logs the error messages to console.
//Deafults to false
onSuccess: function(source, element) {
//Code to be executed when an image has loaded successfully.
//source: Contains the image path that was loaded
//element: Contains the image element that was processed
},
onError: function(message, source, element) {
//Code to be executed when an image has failed.
//message: Contains the reason why the image load failed
},
onComplete: function(source, element) {
//Code to be executed when each image has been processed.
},
onQueueComplete: function() {
//Code to be executed once when all the images in the queue has been processed.
}
});##Defer Images## The following code sample provides an idea of deferring image load with this plugin.
<div class="deferred-loading">
<img data-src="https://www.handbuiltapps.com/media/icons/apple/touch-icon-180.png" />
<img data-src="https://www.handbuiltapps.com/media/icons/apple/touch-icon-152.png" />
</div>$('.deferred-loading').hbaLoadImages({
attribute: 'data-src',
onSuccess: function(source, element) {
element.src = source;
}
});##Author## Balaji Viswanath