怎么 判断图片是否加载完成

有时候我们在前端开发工作中为了获取图片的信息，需要在图片加载完成后才可以正确的获取到图片的大小尺寸，并且执行相应的回调函数使图片产生某种显示效果。本文主要整理了几种常见的jquery判断图片加载完成时的方法

今天来看下如何判断所有的图片加载完成，而在加载完成之前可以使用 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 () {