如何等到全部的圖片都加載完成以後觸發一次onload事件

時間 2019-11-20

標籤如何等到全部圖片加載完成以後觸發一次 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
                });
            }
        });

對於圖片的處理，例如幻燈片播放、縮放等，都是依賴於在全部圖片完成以後再進行操做。javascript

今天來看下如何判斷全部的圖片加載完成，而在加載完成以前能夠使用 loading 的 gif 圖表示正在加載中。html

1、普通方法

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

var num = $img.length;

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

2、使用 jQuery 中的 Deferred 對象

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

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

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

jQuery的deferred對象詳解數組

在這裏，咱們用到了：app

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.

關鍵代碼：async

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()。ide

注：由於 $.when 支持的參數是 $.when(dfd1, dfd2, dfd3, ...)，因此咱們這裏使用了 apply 來接受數組參數。

demo