在封装自己的瀑布流插件的时候,需要给每一个子元素进行定位,但是因为每个元素里面有图片,如果不能确认里面的图片是否加载完成,就进行定位的话,那么获取到的高度就会出错.
最开始的思路:
第一步 : 获取该节点所有的图片节点
第二步 : 获取图片节点的数量长度
第三步 : 遍历所有图片节点
- 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].οnlοad= 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].οnlοad= function(){
length--;
//如果所有图片加载完成,执行回调函数
if(length==0)
fn();
}
}
}
}
这样就可以用来注册一个节点加载完所有图片后的事件