判断图片是否加载完成(jquery插件fe)

在封装自己的瀑布流插件的时候,需要给每一个子元素进行定位,但是因为每个元素里面有图片,如果不能确认里面的图片是否加载完成,就进行定位的话,那么获取到的高度就会出错.

最开始的思路:

 第一步 : 获取该节点所有的图片节点

 第二步 : 获取图片节点的数量长度

 第三步 : 遍历所有图片节点

-    if
如果该图片节点已经加载完成 .数量长度-1

-   else  否则该图片节点未加载完成,那么注册onload加载事件,在该事件中 数量长度-1

    -,如果数量长度=0,那么说明全部加载完成,执行回调函数fn

[

备注:给新手看的

- Dom节点的onload 事件: 当该节点加载完毕后,图片节点是图片加载完成后执行的事件

- $.fn 是jquery中注册插件用的,这里我注册了一个oncomplete插件方法,可以通过

 $('选择器').oncomplete(function(){ 

// TODO 逻辑代码;

 }); 进行调用

 ]

$.fn.oncomplete = function(fn){
//找到所有的图片节点
var imgs=$(this).find("img");
//获取所有图片的长度
var length = imgs.length;
//进行遍历
for( var i=0;i<length;i++){
//如果图片加载完成
if($(imgs[i]).height()>0){
length--;
//如果所有图片加载完成,执行回调函数
if(length==0)
fn();
}
else{
//注册图片加载完成事件
imgs[i].onload= function(){
length--;

  //如果所有图片加载完成,执行回调函数
if(length==0)
fn();
}
}
}
}

后来发现很坑爹的一点 : 就是火狐浏览器中,当图片未加载完成时,高度是 19px,所以这个判断是否加载完成不可以,后来发现图片节点有个原生属性是 complete 可以用来判断图片是否加载完成.那么代码改成如下

$.fn.oncomplete = function(fn){
//找到所有的图片节点
var imgs=$(this).find("img");
//获取所有图片的长度
var length = imgs.length;
//进行遍历
for( var i=0;i<length;i++){
//如果图片加载完成
if($(imgs[i]).complete){
length--;
//如果所有图片加载完成,执行回调函数
if(length==0)
fn();
}
else{
//注册图片加载完成事件
imgs[i].onload= function(){
length--;
//如果所有图片加载完成,执行回调函数
if(length==0)
fn();
}
}
}
}

这样就可以用来注册一个节点加载完所有图片后的事件