gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-12-03 11:11:41 27 4
gpt4 key购买 nike

因此,我正在尝试制作一个网站预加载器,但我不想对整个网站使用 $(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,我不知道为什么?请帮助我处理我的代码以及当加载数组中的所有图像时如何在循环结束时淡入加载器。 ?

最佳答案

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

我会使用 Promises 来编写此代码。结账https://github.com/kriskowal/qhttps://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 - 使用 Javascript 和 Jquery 的网站加载器进度条图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27554059/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com