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>
