jquery图片加载完成判断

今天想项目中遇到一个问题，就是当一张图片已经呈现在网页上，但是我用height()方法获取高度的确是0,这就是所谓的图片没有加载完成，众所周知，图片一般放在服务器上，通过http下载到客户端，而图片下载到本地是需要一定时间的(网速快的路过)。当图片还没有下载完的时候，使用js获取到元素的宽高将会是0。

有的人会说我使用jquery的ready不就好了。如下：

$(document).ready(function(){
  // 在这里写你的代码...
});

但是你仔细推敲下，这是错误的，得先弄懂ready与window.onload的区别。

jquery的ready只是dom的结构加载完毕，便视为加载完成。(缺点是图片没有加载完毕，宽高为0，程序出错)

js的window.onload是指dom的生成和资源的加载，比如flash、图片完全加载出来后才执行onload。(缺点就是当某一张图片很大的时候，岂不阻止了其它js的正常执行)

方法一：load方法 (监听 img 的 load 方法，每 load 一张图片比较一次)

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

　方法二：使用 jQuery 中的 Deferred 对象

http://www.jb51.net/article/70832.htm

偷个懒，明天再写啊，现在碎觉

jquery图片加载完成判断

推荐阅读