javascript - 使用 Javascript 和 Jquery 的网站加载器进度条图像

Question

因此，我正在尝试制作一个网站预加载器，但我不想对整个网站使用 $(window).load 函数，而是希望针对 ID 和类的特定元素。

我能够做这样的事情:

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();

当所有三个图像都加载完毕时，即在“for 循环”结束时，我会淡出加载程序。但这段代码仍然不能很好地工作。在加载所有三个图像之前，加载程序正在消失。如果我尝试提醒name的值，它总是显示#img3，我不知道为什么？请帮助我处理我的代码以及当加载数组中的所有图像时如何在循环结束时淡入加载器。 ？

Answer 1

淡入淡出发生在所有图像加载之前的原因是 .fadeOut() 发生在所有 .load() 回调完成之前。另外你使用的是哪个版本的 jQuery？ onload 事件的 .load() 在版本 1.8 中已弃用。您应该使用 .on('load', handler) 来代替。

我会使用 Promises 来编写此代码。结账https://github.com/kriskowal/q和 https://github.com/gre/qimage

代码看起来像这样

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);
});