JS 实现图片预加载

来源:转载

 

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
  2. <html xmlns="http://www.w3.org/1999/xhtml"> 
  3. <head> 
  4. <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
  5. <title>js 实现图片预加载 加载完后执行动作</title> 
  6. </head> 
  7. <style type="text/css"> 
  8. <!--   
  9. *html{  
  10.  margin:0;  
  11.  padding:0;  
  12.  border:0;  
  13.  }  
  14. body{border:1px solid #f3f3f3; background:#fefefe}  
  15. div#loading{  
  16.   width:950px;  
  17.   height:265px;  
  18.   line-height:265px;  
  19.   overflow:hidden;  
  20.   position:relative;  
  21.   text-align:center;  
  22. }  
  23. div#loading p{  
  24.   position:static;  
  25.   +position:absolute;  
  26.   top:50%;  
  27.   vertical-align:middle;  
  28. }  
  29. div#loading p img{  
  30.   position:static;  
  31.   +position:relative;  
  32.   top:-50%;left:-50%;  
  33.   vertical-align:middle  
  34. }  
  35. --> 
  36. </style> 
  37. <div id="loading"> 
  38.   <p><img src="http://www.baidu.com/img/baidu_logo.gif" /></p> 
  39. </div> 
  40. <script> 
  41. var i=0;  
  42. var c=3;  
  43. var imgarr=new Array  
  44. imgarr[0]="http://www.baidu.com/img/baidu_logo.gif";  
  45. imgarr[1]="http://img.baidu.com/img/logo-img.gif";  
  46. imgarr[2]="http://img.baidu.com/img/logo-zhidao.gif";  
  47. var Browser=new Object();  
  48. Browser.userAgent=window.navigator.userAgent.toLowerCase();  
  49. Browser.ie=/msie/.test(Browser.userAgent);  
  50. Browser.Moz=/gecko/.test(Browser.userAgent);  
  51. function SImage(url,callback)  
  52. {  
  53.     var img = new Image();  
  54.  if(Browser.ie){  
  55.         img.onreadystatechange =function(){    
  56.             if(img.readyState=="complete"||img.readyState=="loaded"){  
  57.                 ii=i+1;  
  58.     callback(i);  
  59.             }  
  60.         }          
  61.     }else if(Browser.Moz){  
  62.         img.onload=function(){  
  63.             if(img.complete==true){  
  64.                 ii=i+1;  
  65.                 callback(i);  
  66.             }  
  67.         }          
  68.     }  
  69.  img.src=url;  
  70.  
  71. }  
  72.  
  73. function icall(v)  
  74. {  
  75.  if(v<c){  
  76.   SImage(""+imgarr[v]+"",icall);  
  77.   }  
  78.  else if(v>=c){  
  79.   i=0;  
  80.   //location.replace('banner.html');//这里写自己的动作吧,  
  81.   }  
  82. }  

 


分享给朋友:
您可能感兴趣的文章:
随机阅读: