本文实例讲述了Jquery实现图片预加载与延时加载的方法。分享给大家供大家参考。具体分析如下:
有很多项目经常会需要判断图片加载完成后执行相应的操作,或者需要图片延迟加载,网上虽然已经有很不错的插件,但要为这些效果还得单独加载一个插件的话总感觉有点不舒服,干脆自己写了个方法:
for(a in arr){
var src=isObject ? $(arr[a]).attr("data-src") : arr[a];
preload(src,arr[a]);
}
function preload(src,obj){
var img=new Image();
img.onload=function(){
numLoaded++;
funLoading && funLoading(numLoaded,arr.length,src,obj);
funOnLoad && numLoaded==arr.length && funOnLoad(numError);
};
img.onerror=function(){
numLoaded++;
numError++;
funOnError && funOnError(numLoaded,obj);
}
img.src=src;
}
}
参数说明:
arr:可以是存放图片路径的一个数组,也可以是选取到的img的jquery对象; funLoading:每一个单独的图片加载完成后执行的操作; funOnLoad:全部图片都加载完成后的操作; funOnError:单个图片加载出错时的操作。
如:
var funloading=function(n,total,obj){
/
n:已加载完成的数量;
total:总共需加载的图片数量;
src:当前加载完成的图片路径;
obj:当loadimg函数中传入的arr为存放图片路径的数组时,obj=src,是图片路径,
当arr为jquery对象时,obj是当前加载完成的img dom对象。
/
console.log(n+"of"+total+" pic loaded.",src);
var newimg = document.createElement("img");
newimg.src=src;
$("body").append(newimg).fadeIn();
}
var funloading_obj=function(n,obj){
console.log(n+"of"+total+" pic loaded.",src);
$(obj).attr("src",src);
$(obj).fadeIn(200);
}
var funOnError=function(n,obj){
console.log("the "+n+"st img loaded Error!");
}
调用示例:
<div class="codetitle"><a style="CURSOR: pointer" data="77919" class="copybut" id="copybut77919" onclick="doCopy('code77919')"> 代码如下: