Progressive jQuery Image Loading Plugin - Image Loader

Image Loader is an useful and ES6 compatible jQuery plugin that progressively displays image loading progress and triggers a callback function when the image is completely loaded.

How to use it:

1. Add references to jQuery library and the jQuery image loading plugin to your webpage.

<script src="//code.jquery.com/jquery-1.12.0.min.js"></script>
<script src="dist/ImageLoader-global.js"></script>

2. Basic usage.

// Create a new ImageLoader instance
var imageLoader = $.ImageLoader(), 
    $images     = $('.image'),
    imgs        = [
        '1.jpg', // Image url
        $images[0], // <img> element
        $images[1] // Element has a 'background-image'
    ];

imageLoader
    .load(imgs) // Start load images
    .progress(function (img) {
        console.log('Loading(' + img.percentage + '%)...', img);
    })
    .done(function (img) {
        console.log('All images loaded!', img);
    });

3. Alternatively, you can use the 'loadImage' method.

$images
    .loadImg()
    .progress(function (img) {
      console.log('Loading(' + img.percentage + '%)...', img);
    })
    .done(function (img) {
      console.log('All images loaded!', img);
    });

Change log:

2016-04-16

• bugfix

2016-03-26

• fixed for safari

---

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