1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" 2 "http://www.w3.org/TR/html4/strict.dtd"> 3 4 <html xmlns="http://www.w3.org/1999/xhtml" lang="en"> 5 <head> 6 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 7 <title>9.图片预加载 案例</title> 8 <meta name="author" content="Administrator" /> 9 <!-- Date: 2014-12-12 --> 10 <style> 11 *{margin:0;padding:0} 12 ul{width:966px; margin:0 auto} 13 li{list-style:none} 14 ul li{float:left;width:300px;height:200px; margin: 10px; border:1px solid #000000; overflow: hidden} 15 ul li img{width:300px;} 16 </style> 17 18 <script> 19 window.onload=function(){ 20 var oUl=document.getElementsByTagName('ul')[0]; 21 var aLi=oUl.getElementsByTagName('li'); 22 var aImg=oUl.getElementsByTagName('img'); 23 var arr=[ 24 '9-images/1.jpg','9-images/2.jpg','9-images/3.jpg','9-images/4.jpg','9-images/5.jpg', 25 '9-images/6.jpg','9-images/7.jpg','9-images/8.jpg','9-images/9.jpg','9-images/10.jpg', 26 '9-images/11.jpg','9-images/12.jpg','9-images/13.jpg','9-images/14.jpg','9-images/15.jpg','9-images/16.jpg' 27 ] 28 29 //先把所有的图片都下载完 30 var oImage=new Image(); 31 var iNow=0; 32 xunlei() 33 function xunlei(){ 34 oImage.src=arr[iNow]; 35 oImage.onload=function(){ 36 iNow++; 37 if(iNow<arr.length){ 38 xunlei(); 39 showImg();//加载完了显示出来 40 window.onscroll=showImg;//滚动的时候显示出来 41 } 42 document.title=iNow+'/'+arr.length 43 } 44 } 45 46 //showImage 可视区内的显示 47 function showImg(){ 48 var scrollTop=document.documentElement.scrollTop || document.body.scrollTop; 49 var iTopn=scrollTop + document.documentElement.clientHeight; 50 for(var i=0;i<aLi.length;i++){ 51 if( !aLi[i].loaded && getTop(aLi[i]) < iTopn ){ 52 aImg[i].src=arr[i]; 53 aLi[i].loaded=true; 54 } 55 } 56 } 57 } 58 59 function getTop(obj){ 60 var iTop=0; 61 if(obj){ 62 iTop+=obj.offsetTop; 63 obj=obj.parentNode; 64 } 65 return iTop 66 } 67 68 </script> 69 70 </head> 71 <body> 72 <ul> 73 <li><img src='9-images/loading.gif'></li> 74 <li><img src='9-images/loading.gif'></li> 75 <li><img src='9-images/loading.gif'></li> 76 <li><img src='9-images/loading.gif'></li> 77 <li><img src='9-images/loading.gif'></li> 78 <li><img src='9-images/loading.gif'></li> 79 <li><img src='9-images/loading.gif'></li> 80 <li><img src='9-images/loading.gif'></li> 81 <li><img src='9-images/loading.gif'></li> 82 <li><img src='9-images/loading.gif'></li> 83 <li><img src='9-images/loading.gif'></li> 84 <li><img src='9-images/loading.gif'></li> 85 <li><img src='9-images/loading.gif'></li> 86 <li><img src='9-images/loading.gif'></li> 87 <li><img src='9-images/loading.gif'></li> 88 <li><img src='9-images/loading.gif'></li> 89 </ul> 90 </body> 91 </html>