JQuery实现图片的预加载与延时加载

转自：http://www.rjboy.cn/?p=1002

预加载，

Js代码  

1. function loadimg(arr,funLoading,funOnLoad,funOnError){
2. var numLoaded=0,
3. numError=0,
4. isObject=Object.prototype.toString.call(arr)==="[object Object]" ? true : false;
5. var arr=isObject ? arr.get() : arr;
6. for(a in arr){
7. var src=isObject ? $(arr[a]).attr("data-src") : arr[a];
8. preload(src,arr[a]);
9. }
10. function preload(src,obj){
11. var img=new Image();
12. img.onload=function(){
13. numLoaded++;
14. funLoading && funLoading(numLoaded,arr.length,src,obj);
15. funOnLoad && numLoaded==arr.length && funOnLoad(numError);
16. };
17. img.onerror=function(){
18. numLoaded++;
19. numError++;
20. funOnError && funOnError(numLoaded,arr.length,src,obj);
21. }
22. img.src=src;
23. }
24. }

参数说明：
  arr：可以是存放图片路径的一个数组，也可以是选取到的img的jquery对象；
  funLoading：每一个单独的图片加载完成后执行的操作；
  funOnLoad：全部图片都加载完成后的操作；
  funOnError：单个图片加载出错时的操作。

懒加载，

Js代码  

1. var imgonload=function(errors){
2. /*errors：加载出错的图片数量；*/
3. console.log("loaded,"+errors+" images loaded error!");
4. }
5. var funloading=function(n,total,src,obj){
6. /*
7. n：已加载完成的数量；
8. total：总共需加载的图片数量；
9. src：当前加载完成的图片路径；
10. obj：当loadimg函数中传入的arr为存放图片路径的数组时，obj=src，是图片路径，
11. 当arr为jquery对象时，obj是当前加载完成的img dom对象。
12. */
13. console.log(n+"of"+total+" pic loaded.",src);
14. var newimg = document.createElement("img");
15. newimg.src=src;
16. $("body").append(newimg).fadeIn();
17. }
18. var funloading_obj=function(n,total,src,obj){
19. console.log(n+"of"+total+" pic loaded.",src);
20. $(obj).attr("src",src);
21. $(obj).fadeIn(200);
22. }
23. var funOnError=function(n,total,src,obj){
24. console.log("the "+n+"st img loaded Error!");
25. }

调试用例,

Js代码  

1. console.log("loading...");
2. loadimg($("img"),funloading_obj,imgonload,funOnError);
3. /*loadimg(["http://pic22.nipic.com/20120619/9607634_212642465144_2.jpg",
4. "http://pic21.nipic.com/20120531/1670912_103610084349_2.jpg",
5. "http://pic21.nipic.com/20120616/4952071_130629530136_2.jpg",
6. "http://pic21.nipic.com/20120610/1723580_105037029000_2.jpg",
7. "http://pic22.nipic.com/20120617/2572038_125013326121_2.jpg"
8. ],funloading,imgonload,funOnError);*/

JQuery实现图片的预加载与延时加载