1

我正在创建一个大页面，其中包含很多包含大背景图像的块，所以我认为最好的办法是显示预加载器并在后台加载图像并更新加载器（20 中的图像 4，ecc）。我的问题是：当 onload 事件触发我的加载器时，我的加载器消失但我仍然看到图像加载，这意味着它没有完全加载。为什么会这样？任何想法？

这是页面：

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

1 回答 1

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

但这之前已经被问过并且回答得更好：如何使用 jQuery 创建“请稍候，正在加载...”动画？

于 2012-10-29T18:04:26.927 回答