所有動態圖像完成加載時的Jquery警報

Question

我使用一個函數通過ajax調用動態地將圖像加載到div。 我需要在圖像開始加載時顯示加載的gif圖像，並在所有圖像完成加載時隱藏。 我的主要任務是知道所有圖像何時完成加載。

這是我的代碼

 $('img').on('load', function ()
 {
alert("image loaded: "+this.src);
 });

但是，此警報會繼續調用每個圖像。

請記住，加載頁面后，圖像是通過ajax調用加載的。

Answer 1

您可以計算屏幕上的所有$（'img'），並在每次加載圖像時遞增變量。 一旦計數與圖像數量相同，就會調用您的警報。

Answer 2

這樣做，

function loadAllImagesFromArray(images){
     for(i = 0 ; i < images.length; i++){
        var imageUrl = images[i];
        // closure to make sure that the value of i is preserved inside the context
        (function(i){
           $.ajax({
             url: imageUrl,
           }).done(function(image) {
             if(i == images.length - 1)
              alert("Image loaded");
           });
        }(i));
      }
    }