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

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

posted @ 2018-03-30 17:26  yangmanliabcd  阅读(1302)  评论(0编辑  收藏  举报