Jquery实现图片预加载与延时加载的方法

本文实例讲述了Jquery实现图片预加载与延时加载的方法。分享给大家供大家参考。具体分析如下：

有很多项目经常会需要判断图片加载完成后执行相应的操作，或者需要图片延迟加载，网上虽然已经有很不错的插件，但要为这些效果还得单独加载一个插件的话总感觉有点不舒服，干脆自己写了个方法：

代码如下:

var arr=isObject ? arr.get() : arr;
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')"> 代码如下: