图片预加载 小案例 

 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>
View Code

 

posted @ 2014-12-12 21:51  miyaye  阅读(178)  评论(0)    收藏  举报