使用Javascript和Jquery的Website Loader进度栏图像

Question

So, I am trying to make a website preloader but rather than using the $(window).load function for the whole website, I want to target specific elements of IDs and classes.

I am able to do something like this:

var ImgArray = ["#img1","#img2","#img3"];

            for(var i = 0 ; i < ImgArray.length; i++) {
                var name = ImgArray[i];

                $(name).load(function() {


                  //var nameNew = name;// name is a string, passed by Reference 

                  alert(name);

                  //$(this).show();

                });
            }

$('.loader').fadeOut();

I am fading out the loader when all the three images are loaded ie at the end of the 'for loop'. But still this code is not working well. The loader is fading before all the three images are loaded. If I try to alert the value of name , it shows #img3 all the time, I don't know why ? Please help me with my code and how to fade the loader at the end of the loop when all the images in the array are loaded. ?

Answer 1

The reason why your fade happens before all images are loaded is because the .fadeOut() happens before all .load() callbacks are finished. Also which version of jQuery are you using? .load() for the onload -event was deprecated in version 1.8. You should use .on('load', handler) instead.

I would use Promises to code this. Checkout https://github.com/kriskowal/q and https://github.com/gre/qimage

And the code would look something like

Q.all([Qimage(img1Url),Qimage(img2Url),Qimage(img3Url)]).spread(function(img1,img2,img3){
    $('#imageContainer').append(img1);
    $('#imageContainer').append(img2);
    $('#imageContainer').append(img3);
    $('.loader').fadeOut();
},function(error){
    console.error(error);
});