jQuery Plugin For Simple Image Preloader - Preload Images

Preload Images is a simple jQuery plugin for preloading an array of images with a custom GIF spinner and callback support.

How to use it:

1. Load the jQuery library and jQuery preload images plugin in the footer of the document.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="js/preloadImages.js"></script>

2. Insert an image preloader in the document.

<div class="container">
<img src="img/spinner.gif" class="loading-images" />
</div>

3. Create an array of images you want to preload.

var arrayImages = new Array(
"1.jpg",
"2.jpg",
"3.jpg",
...
);

4. Call the plugin and append the images to an Html element with fade-in effect.

preloadImage({
images: arrayImages,
callback: function() {
$('.loading-images').fadeOut(2000).remove();
$.each( arrayImages, function(index,value){
var img = $('<img class="dynamic">'); 
img.attr('src', value);
img.prependTo('.container').hide().fadeIn(2000);
}); 
}
});

Change log:

v0.2 (2014-03-25)

• updates

---

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