Not so long ago i created jQuery Image Resize Plugin, today i want to show you another plugin: jQuery Image Preloader. Basically it is a script that loads images in the background and track number of loaded images. It’s very simple, only 25 lines of code, but maybe useful if you are creating jQuery image gallery or some other script that requires image preloading.

Lets start of with how it works. As i understand it, it’s not actually a plugin but rather jQuery extension. It means that it’s not applied to HTML elements but rather used as function. Here’s how you can use it.

$(function() {
    $.preload([
        "http://farm3.static.flickr.com/2661/3792282714_90584b41d5_b.jpg",
        "http://farm2.static.flickr.com/1266/1402810863_d41f360b2e_o.jpg"
    ], {
        init: function(loaded, total) {
            $("#indicator").html("Loaded: "+loaded+"/"+total);
        },
        loaded: function(img, loaded, total) {
            $("#indicator").html("Loaded: "+loaded+"/"+total);
            $("#full-screen").append(img);
        },
        loaded_all: function(loaded, total) {
            $("#indicator").html("Loaded: "+loaded+"/"+total+". Done!");
        }
    });
});

$.preload() function takes two parameters. First is an array of urls that will be loaded. Second is an object that can have up to three callbacks:

  • init() – executed before the first loading images start
  • loaded() – executed when image is loaded (thus if there are 10 images then this callback is executed 10 times, for each image once)
  • loaded_all() – executed when all images are loaded

You can see how it works here. That’s an extremly simple example but will allow you to easier grasp how to modify it to your needs.