檢測多個圖像加載事件

我想知道是否有一種方法來檢測多個圖像的加載事件（尤其是一個函數應該在給定集中的最後一個圖像完成加載時執行）。檢測多個圖像加載事件

例如，用戶點擊一個鏈接，lighbox出現10個圖像。所有圖像加載完畢後，加載條應消失。

jQuery(".lightbox-image").each(function(){ 
    var image = jQuery(this); 
    jQuery('<img />').attr('src', image.attr('src')).load(function(){ 
     hideLoadingBar(); 
    }); 
});

這不幸觸發hideLoadingBar();太早（後一個圖像已完成加載）。

P.S.
我也需要我的功能來處理圖像已被緩存，所以：jQuery('#img1, #img2').load();將無法正常工作。

來源

2013-04-13 Atadj

看到這個http://stackoverflow.com/a/9624426/235710 –

@MohammadAdil這正是什麼不工作時，圖像已被緩存。而且我不能'手動'（'加載'）'，因爲那會太早執行'hideLoadingBar（）'。 – Atadj

如果我沒有錯誤加載始終是ajax請求，你嘗試進度回調？ – steo

看看這jQuery imagesLoaded插件，它應該適合你的需求，我認爲。

來源

2013-04-13 15:36:37

好吧，似乎沒有人有更好的主意，所以下面是我的解決方案/解決方法。另外這個問題的答案可能是你想要使用的工具，因爲它是專門爲創建一個庫，但這裏的，我要使用的，因爲它是短而簡單的解決方案：

var allImages = jQuery(".lightbox-image").length; 
var counter = 0; 
jQuery(".lightbox-image").each(function(){ 
    var image = jQuery(this).find('.myimage'); 
    jQuery('<img />').attr('src', image.attr('src')).load(function(){ 
     counter++; 
     if(counter >= allImages){ 
      hideLoadingBar(); 
     } 
    }); 
});

Works的緩存圖片和沒有緩存的圖像。

來源

2013-04-13 15:57:44 Atadj

我不認爲使用lib是這麼簡單的任務的好主意。 –

如果您擁有10個左右的相當大的圖像，並且此功能執行時當前正在加載，此解決方案會發生什麼情況。然後你會開始另外10次下載相同的圖像，是不是？也許你的表現放緩是可以接受的。 –

同時檢查瀏覽器的怪癖[記錄在插件頁面]（https://github.com/desandro/imagesloaded/wiki/Browser-quirks）。 –

檢測多個圖像加載事件

回答

相關問題