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

今天來看下如何判斷所有的圖片加載完成，而在加載完成之前可以使用 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 來接受數組參數。

轉載于:https://www.cnblogs.com/good10000/p/4717046.html

總結

以上是生活随笔為你收集整理的jQuery 判断所有图片加载完成的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。