jQuery Plugin For Preloading Images With Javascript - imageloader

imageloader is an useful jQuery plugin for preloading images with javascirpt to improve the user experience.

You might also like:

•  jQuery Plugin for Faster Page Load Time - Pronto
• jQuery Plugin For Lazy Loading Images - lately.js
• Image Lazy Loader Plugin for jQuery - lazyload

How to use it:

1. Include the latest jQuery library and jQuery imageloader plugin on your page

<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="js/jquery.imageloader.js"></script>

2. Markup

<span class="preloader"></span>
<ul id="images"></ul>

3. The javascript

<script>
var $line = $('.headline .preloader'),
$images =$('#images');

$(document).ready(function(){
$.imageloader({

// Array of image URLs to load
urls: ['images/0.jpg', 'images/1.jpg', ...],

smoothing: true,

onComplete: function(images){
$('#complete-icon').animate({opacity:1}, 600);
},

onUpdate: function(ratio, image){
$line.css('width', (ratio * 100) + '%');
if(image){
var index = $('#images li').size();
$images.append('<li id="' +  index + '"><img src="' + image + '"/></li>');
$('#images li:eq(' + index + ')').delay(index * 50).animate({opacity: 1}, 1000);
}
},

onError: function(err){
console.log(err);
}
});
});
</script>

Change Log:

v2.0 (2013-05-16)

• simplified, allow multiple calls on one page
• onComplete no longer has `images` parameter
• can now do multiple $.imageloader calls on one page

---

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