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循环结束时，我正在淡出加载器。但是这段代码仍然不能正常运行。在加载所有三个图像之前，加载程序正在淡化。如果我尝试提醒名称的值，它会一直显示＃img3，我不知道为什么？请帮我处理我的代码，以及如何在加载数组中的所有图像时在循环结束时淡化加载程序。？

Answer 1

在加载所有图像之前发生淡入淡出的原因是.fadeOut()在所有.load()回调完成之前发生。你还使用哪个版本的jQuery？版本1.8中已弃用.load() - onload事件。您应该使用.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);
});

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

1 个答案: