图片的预先加载讲解：

 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>