图片的预先加载讲解：
1 <!DOCTYPE HTML>
2 <html>
3 <head>
4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
5 <title>无标题文档</title>
6 <script>
7 /*
8 我们经常会用下载软件下载电视剧，一个电视剧可以能有N集。
9 1.先把所所有的集数全部下载完成，然后一个个开开心心的看。你真的开心吗？
10 2.我们先下一集，然后看完，看完以后再去下下一集，然后再看。
11
12 3.我们先下第一集，下载完成以后，再看第一集的时候去下载后面的内容，这样，我们可以在看前面的内容的时候，把后面的下完了，节约了很多的时间
13
14 在页面刚打开的时候，我们去加载第一张图片，然后页面加载完成以后，在用户看的时间内，去加载后面的内容，那么我们必须有个工具（迅雷） -> Image对象
15 */
16
17 window.onload = function() {
18
19 var oImg = document.getElementById(‘img1‘);
20
21 var oImage = new Image();
22 /*
23 属性：
24 src : 当我们给Image对象的src属性赋值一个url的时候，这个Image对象就去会加载url资源，加载完成以后的资源被保存到了浏览器的缓存文件夹里面，下次如果我们要去调用这个url地址的时候，直接是从缓存文件夹读取到的，所以速度很快。
25 onload : 当资源加载完成的时候触发
26 onerror : 当资源加载失败的时候触发
27 */
28 oImage.src = ‘http://b.hiphotos.baidu.com/image/w%3D2048/sign=526ef7bda41ea8d38a227304a332314e/1ad5ad6eddc451dae05f4cedb4fd5266d016320e.jpg‘;
29 oImage.onload = function() {
30 alert(‘加载完成‘);
31
32 document.onclick = function() {
33 oImg.src = ‘http://b.hiphotos.baidu.com/image/w%3D2048/sign=526ef7bda41ea8d38a227304a332314e/1ad5ad6eddc451dae05f4cedb4fd5266d016320e.jpg‘;
34 }
35 }
36
37 /*oImage.onerror = function() {
38 alert(‘加载出错‘);
39 }*/
40
41
42 }
43 </script>
44 </head>
45
46 <body>
47 <img src="" id="img1" />
48 </body>
49 </html>
图片的预先加载应用实例：
1 <!DOCTYPE HTML>
2 <html>
3 <head>
4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
5 <title>无标题文档</title>
6 <style>
7 #ul1 {margin: 100px auto 0; padding: 0;}
8 li {float: left; margin:0 0 10px 10px; list-style:none; border: 1px solid black;}
9 img {width: 290px; height: 200px; display: block;}
10 </style>
11 <script>
12 window.onload = function() {
13
14 var oUl = document.getElementById(‘ul1‘);
15 var aImg = oUl.getElementsByTagName(‘img‘);
16
17 showImage();
18
19 window.onscroll = showImage;
20
21 function showImage() {
22
23 var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
24
25 for (var i=0; i<aImg.length; i++) {
26
27 if ( !aImg[i].isLoad && getTop(aImg[i]) < scrollTop + document.documentElement.clientHeight ) {
28 //alert(i);
29 aImg[i].src = aImg[i].getAttribute(‘_src‘);
30 aImg[i].isLoad = true;
31 }
32
33 }
34
35 }
36
37 function getTop(obj) {
38 var iTop = 0;
39 while(obj) {
40 iTop += obj.offsetTop;
41 obj = obj.offsetParent;
42 }
43 return iTop;
44 }
45
46 }
47 </script>
48 </head>
49
50 <body>
51 <ul id="ul1">
52 <li><img _src="img/1.jpg" src="img/white.JPG" /></li>
53 <li><img _src="img/2.jpg" src="img/white.JPG" /></li>
54 <li><img _src="img/3.jpg" src="img/white.JPG" /></li>
55 <li><img _src="img/4.jpg" src="img/white.JPG" /></li>
56 <li><img _src="img/5.jpg" src="img/white.JPG" /></li>
57 <li><img _src="img/6.jpg" src="img/white.JPG" /></li>
58 <li><img _src="img/7.jpg" src="img/white.JPG" /></li>
59 <li><img _src="img/1.jpg" src="img/white.JPG" /></li>
60 <li><img _src="img/2.jpg" src="img/white.JPG" /></li>
61 <li><img _src="img/3.jpg" src="img/white.JPG" /></li>
62 <li><img _src="img/4.jpg" src="img/white.JPG" /></li>
63 <li><img _src="img/5.jpg" src="img/white.JPG" /></li>
64 <li><img _src="img/6.jpg" src="img/white.JPG" /></li>
65 <li><img _src="img/7.jpg" src="img/white.JPG" /></li>
66 <li><img _src="img/1.jpg" src="img/white.JPG" /></li>
67 <li><img _src="img/2.jpg" src="img/white.JPG" /></li>
68 <li><img _src="img/3.jpg" src="img/white.JPG" /></li>
69 <li><img _src="img/4.jpg" src="img/white.JPG" /></li>
70 <li><img _src="img/5.jpg" src="img/white.JPG" /></li>
71 <li><img _src="img/6.jpg" src="img/white.JPG" /></li>
72 <li><img _src="img/7.jpg" src="img/white.JPG" /></li>
73 <li><img _src="img/1.jpg" src="img/white.JPG" /></li>
74 <li><img _src="img/2.jpg" src="img/white.JPG" /></li>
75 <li><img _src="img/3.jpg" src="img/white.JPG" /></li>
76 <li><img _src="img/4.jpg" src="img/white.JPG" /></li>
77 <li><img _src="img/5.jpg" src="img/white.JPG" /></li>
78 <li><img _src="img/6.jpg" src="img/white.JPG" /></li>
79 <li><img _src="img/7.jpg" src="img/white.JPG" /></li>
80 <li><img _src="img/1.jpg" src="img/white.JPG" /></li>
81 <li><img _src="img/2.jpg" src="img/white.JPG" /></li>
82 <li><img _src="img/3.jpg" src="img/white.JPG" /></li>
83 <li><img _src="img/4.jpg" src="img/white.JPG" /></li>
84 <li><img _src="img/5.jpg" src="img/white.JPG" /></li>
85 <li><img _src="img/6.jpg" src="img/white.JPG" /></li>
86 <li><img _src="img/7.jpg" src="img/white.JPG" /></li>
87 <li><img _src="img/1.jpg" src="img/white.JPG" /></li>
88 <li><img _src="img/2.jpg" src="img/white.JPG" /></li>
89 <li><img _src="img/3.jpg" src="img/white.JPG" /></li>
90 <li><img _src="img/4.jpg" src="img/white.JPG" /></li>
91 <li><img _src="img/5.jpg" src="img/white.JPG" /></li>
92 <li><img _src="img/6.jpg" src="img/white.JPG" /></li>
93 <li><img _src="img/7.jpg" src="img/white.JPG" /></li>
94 <li><img _src="img/1.jpg" src="img/white.JPG" /></li>
95 <li><img _src="img/2.jpg" src="img/white.JPG" /></li>
96 <li><img _src="img/3.jpg" src="img/white.JPG" /></li>
97 <li><img _src="img/4.jpg" src="img/white.JPG" /></li>
98 <li><img _src="img/5.jpg" src="img/white.JPG" /></li>
99 <li><img _src="img/6.jpg" src="img/white.JPG" /></li>
100 <li><img _src="img/7.jpg" src="img/white.JPG" /></li>
101 <li><img _src="img/1.jpg" src="img/white.JPG" /></li>
102 <li><img _src="img/2.jpg" src="img/white.JPG" /></li>
103 <li><img _src="img/3.jpg" src="img/white.JPG" /></li>
104 <li><img _src="img/4.jpg" src="img/white.JPG" /></li>
105 <li><img _src="img/5.jpg" src="img/white.JPG" /></li>
106 <li><img _src="img/6.jpg" src="img/white.JPG" /></li>
107 <li><img _src="img/7.jpg" src="img/white.JPG" /></li>
108 </ul>
109 </body>
110 </html>
图片的预先加载
时间： 2024-10-07 11:39:01