執行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') 
});