执行js后所有图像加载不工作

Question

（不重复，因为找不到完全/简单的解决方案）
我试图执行所有图像完全加载JS后。我的目标是，当所有图像完全加载完毕后，请将类别my-loader和addClass visible更改为main-slider div。

HTML：

<div class='main-slider my-loader'> 
<img src="https://unsplash.it/200/300/"> 
<img src="https://unsplash.it/200/300/"> 
<img src="https://unsplash.it/200/300/"> 
</div> 

执行下面的JS当所有的图像完全加载

$(".main-slider").removeClass("my-loader").addClass("visible"); 

试过这个js：
但不是正常工作在我的网站，问题是当我清除浏览器缓存，那么它工作/执行！当我重新加载页面，然后下一次它不工作/执行！
它只适用于我清除浏览器缓存。

var img = $('.main-slider img') 
var count = 0 
img.each(function(){ 
    $(this).load(function(){ 
    count = count + 1 
    if(count === img.length) { 
     $('.main-slider').removeClass('my-loader').addClass('visible') 
    } 
    }); 
}); 

任何简单的解决方案？提前致谢。

Answer 1

jQuery提供了一种方法来为窗口加载事件注册一个回调，当整个页面（包括图像和iframe）被加载时，该事件将会触发。 参考：https://learn.jquery.com/using-jquery-core/document-ready/

你的代码应该是这个样子：

$(window).load(function() { 
    var img = $('.main-slider img') 
    var count = 0 
    img.each(function(){ 
    $(this).load(function(){ 
     count = count + 1 
     if(count === img.length) { 
     $('.main-slider').removeClass('my-loader').addClass('visible') 
     } 
    }); 
    }); 
}); 

Answer 2

下面是如何如果图像是在旧的浏览器等

缓存做到这一点，利用Deferreds和本地处理程序，并调用 onload处理程序

var img = $('.main-slider img'); 
var defs = img.map(function(){ 
    var def = new Deferred(); 

    this.onload = def.resolve; 
    this.onerror = def.reject; 
    if (this.complete) this.onload(); 

    return def.promise(); 
}); 

$.when.apply($, defs).then(function() { 
    $('.main-slider').removeClass('my-loader').addClass('visible') 
});