我正在创建一个包含大量背景图片的大页面的大页面,所以我认为最好的方法是显示预加载器并在后台加载图像并更新加载器(图片4,共20页, ECC)。我的问题是:当onload事件触发我的加载器diasppears但我仍然看到图像加载,这意味着它没有完全加载。为什么会这样?任何想法?
这是页面:
http://zhereicome.com/experiments/statics/myascensor/#1-1
提前致谢
nImages = $('.slide').length;
loadedImgs = 0;
var bgImages = ['img/bbb.png','img/bbb2.png','img/bbb3.png'];
$('.slide').each(function(i){
var curSlide = $(this);
var img = new Image();
img.src = bgImages[ i % 3 ];
img.onLoad = imageLoaded(img, curSlide);
})
function imageLoaded(img, curSlide){
curSlide.css('backgroundImage', 'url(' + img.src + ')');
loadedImgs++;
if(nImages == loadedImgs){
$('#container').css('visibility','visible');
$('#loader-cont').fadeOut(1000);
}
$('.loader-inner .title').text(loadedImgs / nImages);
}
答案 0 :(得分:1)
你似乎在使用window.onload和document.ready:
时遇到了一些麻烦$(document).ready(function(){
// This will be executed when the DOM is ready.
});
$(window).load(function(){
// This will be executed when the whole document and all its
// referenced items (style sheets, scripts, images, etc.) are loaded.
});
但之前已经提出这个问题并且回答得更好,更好:How can I create a "Please Wait, Loading..." animation using jQuery?