Adding a Preloader to an Bunch of Images

Question

I am using a bunch of images and creating a slideshow.

$(function(){
    $("#big-image img:eq(0)").nextAll().hide();
    $(".small-images img").click(function(e){
        var index = $(this).index();
        $("#big-image img").eq(index).show().siblings().hide();
    });
});

How can I :

Preload the images if there are going to be say 20 of them and how to show a preload icon during this process? I have seen some preloading examples on SO but nothing seems to fit.

A fiddle - http://jsfiddle.net/BkwrZ/

http://stackoverflow.com/questions/476679/preloading-images-with-jquery — Milos Miskone Sretin, Feb 16 '14 at 05:32
Thanks! How do I show a preloader/some indicator when the images are loading or rather when the images are being preloaded? — JRage, Feb 16 '14 at 05:39

score 0 · Accepted Answer · edited May 23 '17 at 11:44

$.fn.preload = function (fn) {
var len = this.length, i = 0;
return this.each(function () {
    var tmp = new Image, self = this;
    if (fn) tmp.onload = function () {
        fn.call(self, 100 * ++i / len, i === len);
    };
    tmp.src = this.src;
    });
};

$('img').preload(function(perc, done) {
    console.log(this, perc, done);
});

http://jsfiddle.net/yckart/ACbTK/

You have there explained in the link I gave you. Just read all answers. Preloading images with jQuery

So if you want to show that preloaded perc just change the line from:

console.log(this, perc, done);

so instead of loging it display in some div.

See this example http://jsfiddle.net/ACbTK/6/

Check this http://jsfiddle.net/BkwrZ/1/ I hope it can help you.

Thanks for your efforts but I was thinking of adding something to my already existing code. This looks 'revamped'. — JRage, Feb 16 '14 at 06:07

Adding a Preloader to an Bunch of Images

1 Answers1