jquery-image-loader

This is a simple jQuery plugin for loading images.

Install

npm install jquery-image-loader --save

Classic

Load the jQuery and this plugin.

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

ECMAScript 6

This plugin is written in ECMAScript 6, so you can just simply import the source file.

import $ from 'jquery'
import ImageLoaderFactory from 'src/ImageLoader.js'
 
// Setup plugin
ImageLoaderFactory($);

Usage

Assume you have the following markup.

<img class="image" src="images/IMG_2969.jpg">
<div class="image" style="background-image:url('images/IMG_3018.jpg');"></div>

You can load IMG_1.jpg and IMG_2.jpg by :

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

If you want to load image by URL, use the ImageLoader instance instead.

var imageLoader = $.ImageLoader(), // Create a new ImageLoader instance
    $images     = $('.image'),
    imgs        = [
        'https://static.pexels.com/photos/6151/animal-cute-fur-white.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);
    });