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

浏览数：20 / 时间：2015年06月09日

转自：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.    
  6.     var arr=isObject ? arr.get() : arr;  
  7.     for(a in arr){  
  8.         var src=isObject ? $(arr[a]).attr("data-src") : arr[a];  
  9.         preload(src,arr[a]);  
  10.     }  
  11.    
  12.     function preload(src,obj){  
  13.         var img=new Image();  
  14.         img.onload=function(){  
  15.             numLoaded++;  
  16.             funLoading && funLoading(numLoaded,arr.length,src,obj);  
  17.             funOnLoad && numLoaded==arr.length && funOnLoad(numError);  
  18.         };  
  19.         img.onerror=function(){  
  20.             numLoaded++;  
  21.             numError++;  
  22.             funOnError && funOnError(numLoaded,arr.length,src,obj);  
  23.         }  
  24.         img.src=src;  
  25.     }  
  26.    
  27. }  

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

 

懒加载，

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

 

调试用例,

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实现图片的预加载与延时加载,古老的榕树,5-wow.com

郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。

标签： class 代码 src sp word Go class 代码 src sp word Go

相关文章

随机文章

您可能还喜欢

您可能还喜欢