jQuery简单实现图片预加载
jQuery实现图片预加载
JS代码
$(function(){
loadImg("http://d.hiphotos.baidu.com/image/pic/item/fd039245d688d43f14f69eff7f1ed21b0ef43b5b.jpg",addImg);
functionloadImg(url,callback){
varimg=newImage();
img.onload=function(){
img.onload=null;
callback(img);
}
img.src=url;
img.width="202";
img.height="202";
img.attr("defaulturl","../images/img.png");
if(){}
}
functionaddImg(img){
$(img).appendTo($(".imgloadli"))
}
})
HTML:
<!doctypehtml> <htmllang="en"> <head> <metacharset="UTF-8"> <title>图片预加载</title> <linkrel="stylesheet"type="text/css"href="css/index.css"> <scripttype="text/javascript"src="js/jquery-1.8.3.min.js"></script> <scripttype="text/javascript"src="js/index.js"></script> </head> <body> <divclass="imgload"> <ul> <liclass="fl"></li> <liclass="fl"></li> <liclass="fl"></li> <liclass="fl"></li> <liclass="fl"></li> <liclass="fl"></li> <liclass="fl"></li> <liclass="fl"></li> <liclass="fl"></li> </ul> </div> </body> </html>
其他实例
functionloadimg(arr,funLoading,funOnLoad,funOnError){
varnumLoaded=0,
numError=0,
isObject=Object.prototype.toString.call(arr)==="[objectObject]"?true:false;
vararr=isObject?arr.get():arr;
for(ainarr){
varsrc=isObject?$(arr[a]).attr("data-src"):arr[a];
preload(src,arr[a]);
}
functionpreload(src,obj){
varimg=newImage();
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,arr.length,src,obj);
}
img.src=src;
}
}
参数说明：
arr：可以是存放图片路径的一个数组，也可以是选取到的img的jquery对象；
funLoading：每一个单独的图片加载完成后执行的操作；
funOnLoad：全部图片都加载完成后的操作；
funOnError：单个图片加载出错时的操作。
懒加载，
varimgonload=function(errors){
/*errors：加载出错的图片数量；*/
console.log("loaded,"+errors+"imagesloadederror!");
}
varfunloading=function(n,total,src,obj){
/*
n：已加载完成的数量；
total：总共需加载的图片数量；
src：当前加载完成的图片路径；
obj：当loadimg函数中传入的arr为存放图片路径的数组时，obj=src，是图片路径，
当arr为jquery对象时，obj是当前加载完成的imgdom对象。
*/
console.log(n+"of"+total+"picloaded.",src);
varnewimg=document.createElement("img");
newimg.src=src;
$("body").append(newimg).fadeIn();
}
varfunloading_obj=function(n,total,src,obj){
console.log(n+"of"+total+"picloaded.",src);
$(obj).attr("src",src);
$(obj).fadeIn(200);
}
varfunOnError=function(n,total,src,obj){
console.log("the"+n+"stimgloadedError!");
}
调试用例
console.log("loading...");
loadimg($("img"),funloading_obj,imgonload,funOnError);
/*loadimg(["http://pic22.nipic.com/20120619/9607634_212642465144_2.jpg",
"http://pic21.nipic.com/20120531/1670912_103610084349_2.jpg",
"http://pic21.nipic.com/20120616/4952071_130629530136_2.jpg",
"http://pic21.nipic.com/20120610/1723580_105037029000_2.jpg",
"http://pic22.nipic.com/20120617/2572038_125013326121_2.jpg"
],funloading,imgonload,funOnError);*/
以上所述就是本文的全部内容了，希望大家能够喜欢。