Asynchronous Image Loading with jQuery Image Loader Plugin

Image Loader is a simple jQuery plugin used to asynchronously load images within a container by using image data-src attribute.

Basic Usage:

1. Include the jQuery javascript library and jQuery image loader plugin in your document.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="jquery-image-loader-min.js"></script>

2. Create a set of images with data-src attribute that you want to load within the 'demo' div.

<div class="demo">
<img data-src="path/to/1.jpg" alt="" />
<img data-src="path/to/2.jpg" alt="" />
<img data-src="path/to/3.jpg" alt="" />
...
</div>

3. Initialize the plugin with callback events.

<script>
$('.demo').loadImages({
  imgLoadedClb: function(){}, // Triggered when an image is loaded. ('this' is the loaded image)
  allLoadedClb: function(){}, // Triggered when all images are loaded. ('this' is the wrapper in which all images are loaded, or the image if you ran it on one image)
  imgErrorClb:  function(){}, // Triggered when the image gives an error. Useful when you want to add a placeholder instead or remove it. ('this' is the loaded image)
  noImgClb:     function(){}, // Triggered when there are no image found with data-src attributes, or when all images give an error. ('this' is the wrapper in which all images are loaded, or the image if you ran it on one image)
  dataAttr:     'src' // The data attribute that contains the source. Default 'src'.
});
</script>

---

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