如何等到所有的圖片都加載完成之后觸發一次onload事件

var details_img = $(".details img");    //所有的圖片
        var img_len = details_img.length;
        details_img.on('load', function() {
            if (!--img_len) {
                if (detailScroll) {
                    detailScroll.destroy();
                    detailScroll = null;
                }
                detailScroll = new IScroll('.bottom', {
                    scrollbars: true,
                    shrinkScrollbars: 'scale',
                    snap: true
                });
            }
        });

對於圖片的處理，例如幻燈片播放、縮放等，都是依賴於在所有圖片完成之后再進行操作。

今天來看下如何判斷所有的圖片加載完成，而在加載完成之前可以使用 loading 的 gif 圖表示正在加載中。

一、普通方法

監聽 img 的 load 方法，每 load 一張圖片比較一次。關鍵代碼如下：

var num = $img.length;

$imgs.load(function() {
    num--;
    if (num > 0) {
        return;
    }
    console.log('load compeleted');
}

二、使用 jQuery 中的 Deferred 對象

Deferred 對象是從 jQuery 1.5.0 版本開始引入的一個新功能，詳細介紹可以見 官方文檔。

簡單的說，Deferred 對象就是jQuery的回調函數解決方案，它解決了如何處理耗時操作的問題， 對那些操作提供了更好的控制，以及統一的編程接口。

阮一峰有一篇文章是介紹 Deferred 對象的，寫的比較詳細，對於入門比較有用。

jQuery的deferred對象詳解

在這里，我們用到了：

• deferred.resolve(): Resolve a Deferred object and call any doneCallbacks with the given args.
• deferred.when(): Provides a way to execute callback functions based on one or more objects, usually Deferred objects that represent asynchronous events.
• deferred.done(): Add handlers to be called when the Deferred object is resolved.

關鍵代碼：

var defereds = [];

$imgs.each(function() { var dfd = $.Deferred(); $(this).load(dfd.resolve); defereds.push(dfd); }); $.when.apply(null, defereds).done(function() { console.log('load compeleted'); }); 

基本思路：
每加載完一張圖片 resolve()，when() 當所有的 Deferred 完成便執行 done()。

注： 因為 $.when 支持的參數是 $.when(dfd1, dfd2, dfd3, ...)，所以我們這里使用了 apply 來接受數組參數。

demo