图片加载问题

Question

我正在创建一个大页面，其中包含很多包含大背景图像的块，所以我认为最好的办法是显示预加载器并在后台加载图像并更新加载器（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);
}

Answer 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?