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

前端之家收集整理的这篇文章主要介绍了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:单个图片加载出错时的操作。

如:

代码如下:
图片数量;*/ console.log("loaded,"+errors+" images loaded error!"); }

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')"> 代码如下:
<div class="codebody" id="code77919">console.log("loading...");
loadimg($("img"),funloading_obj,imgonload,funOnError);
/loadimg(["http://pic22.nipic.com/20120619/9607634_212642465144_2.jpg",
"/20120531/1670912_103610084349_2.jpg",
"/20120616/4952071_130629530136_2.jpg",
"/20120610/1723580_105037029000_2.jpg",
"http://pic22.nipic.com/20120617/2572038_125013326121_2.jpg"
],funloading,funOnError);
/

上面算是原生态写法了,下面我们介绍一个基于Lazy Load,延迟加载图片的 jQuery 插件

Lazy Load 依赖于 jQuery. 请将下列代码加入页面 head 区域:

代码如下:

猜你在找的jQuery相关文章