js中图片的预加载演示

 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 window.onload = function() {
 8     
 9     var oImg = document.getElementById('img1');
10     
11     var oImage = new Image();
12     
13     var arr = [
14         'http://d.hiphotos.baidu.com/image/w%3D2048/sign=2846dc1369600c33f079d9c82e74500f/a044ad345982b2b7938726c333adcbef76099b98.jpg',
15         'http://f.hiphotos.baidu.com/image/w%3D2048/sign=2da141ad013b5bb5bed727fe02ebd439/7dd98d1001e9390124aacd3879ec54e736d1960f.jpg',
16         'http://g.hiphotos.baidu.com/image/w%3D2048/sign=5e067f12a918972ba33a07cad2f57b89/b8014a90f603738d27674f24b11bb051f819ec83.jpg',
17         'http://f.hiphotos.baidu.com/image/w%3D2048/sign=fc9023a7d343ad4ba62e41c0b63a5baf/4bed2e738bd4b31ca2a24ab985d6277f9e2ff812.jpg',
18         'http://f.hiphotos.baidu.com/image/w%3D2048/sign=99191869cebf6c81f7372be88806b035/9345d688d43f8794a159b42fd01b0ef41bd53a08.jpg',
19         'http://a.hiphotos.baidu.com/image/w%3D2048/sign=4aaddd39718da9774e2f812b8469f919/8b13632762d0f70391b28bd60afa513d2697c5b3.jpg',
20         'http://g.hiphotos.baidu.com/image/w%3D2048/sign=50df8b2efffaaf5184e386bfb86c95ee/fc1f4134970a304ebbdb83f2d3c8a786c9175c38.jpg'
21     ];
22     
23     var iCur = 0;
24     var i = 0;
25     
26     xunlei();
27     
28     oImg.onclick = function() {
29         i++;
30         if (i < arr.length) {
31             oImg.src = arr[i];
32         }
33     }
34     
35     function xunlei() {
36         oImage.src = arr[iCur];
37         oImage.onload = function() {
38             iCur++;
39             if (iCur < arr.length) {
40                 xunlei();    //递归
41             }
42             document.title = iCur + ' / ' + arr.length;
43         }
44     }
45     
46 }
47 </script>
48 </head>
49 
50 <body>
51     <img src="http://b.hiphotos.baidu.com/image/w%3D2048/sign=526ef7bda41ea8d38a227304a332314e/1ad5ad6eddc451dae05f4cedb4fd5266d016320e.jpg" id="img1" style=" 300px;" />
52 </body>
53 </html>

当前页思路：图片数据存储在数组中。当打开页面后，先加载第一张图片，给用户查看，同时去加载剩下的图片，而不是一次性加载所有的图片。

被加载的图片放在浏览器缓存里，如果没有操作，并不会影响页面的呈现。只有我们去调用加载进来的图片的src属性时，才会用到缓存中的图片。

接下来，我们看一个图片按需加载的实例：

  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                 aImg[i].src = aImg[i].getAttribute('_src');
 29                 aImg[i].isLoad = true;
 30             }
 31             
 32         }
 33         
 34     }
 35     
 36     function getTop(obj) {
 37         var iTop = 0;
 38         while(obj) {
 39             iTop += obj.offsetTop;
 40             obj = obj.offsetParent;
 41         }
 42         return iTop;
 43     }
 44     
 45 }
 46 </script>
 47 </head>
 48 
 49 <body>
 50     <ul id="ul1">
 51         <li><img _src="img/1.jpg" src="img/white.JPG" /></li>
 52         <li><img _src="img/2.jpg" src="img/white.JPG" /></li>
 53         <li><img _src="img/3.jpg" src="img/white.JPG" /></li>
 54         <li><img _src="img/4.jpg" src="img/white.JPG" /></li>
 55         <li><img _src="img/5.jpg" src="img/white.JPG" /></li>
 56         <li><img _src="img/6.jpg" src="img/white.JPG" /></li>
 57         <li><img _src="img/7.jpg" src="img/white.JPG" /></li>
 58         <li><img _src="img/1.jpg" src="img/white.JPG" /></li>
 59         <li><img _src="img/2.jpg" src="img/white.JPG" /></li>
 60         <li><img _src="img/3.jpg" src="img/white.JPG" /></li>
 61         <li><img _src="img/4.jpg" src="img/white.JPG" /></li>
 62         <li><img _src="img/5.jpg" src="img/white.JPG" /></li>
 63         <li><img _src="img/6.jpg" src="img/white.JPG" /></li>
 64         <li><img _src="img/7.jpg" src="img/white.JPG" /></li>
 65         <li><img _src="img/1.jpg" src="img/white.JPG" /></li>
 66         <li><img _src="img/2.jpg" src="img/white.JPG" /></li>
 67         <li><img _src="img/3.jpg" src="img/white.JPG" /></li>
 68         <li><img _src="img/4.jpg" src="img/white.JPG" /></li>
 69         <li><img _src="img/5.jpg" src="img/white.JPG" /></li>
 70         <li><img _src="img/6.jpg" src="img/white.JPG" /></li>
 71         <li><img _src="img/7.jpg" src="img/white.JPG" /></li>
 72         <li><img _src="img/1.jpg" src="img/white.JPG" /></li>
 73         <li><img _src="img/2.jpg" src="img/white.JPG" /></li>
 74         <li><img _src="img/3.jpg" src="img/white.JPG" /></li>
 75         <li><img _src="img/4.jpg" src="img/white.JPG" /></li>
 76         <li><img _src="img/5.jpg" src="img/white.JPG" /></li>
 77         <li><img _src="img/6.jpg" src="img/white.JPG" /></li>
 78         <li><img _src="img/7.jpg" src="img/white.JPG" /></li>
 79         <li><img _src="img/1.jpg" src="img/white.JPG" /></li>
 80         <li><img _src="img/2.jpg" src="img/white.JPG" /></li>
 81         <li><img _src="img/3.jpg" src="img/white.JPG" /></li>
 82         <li><img _src="img/4.jpg" src="img/white.JPG" /></li>
 83         <li><img _src="img/5.jpg" src="img/white.JPG" /></li>
 84         <li><img _src="img/6.jpg" src="img/white.JPG" /></li>
 85         <li><img _src="img/7.jpg" src="img/white.JPG" /></li>
 86         <li><img _src="img/1.jpg" src="img/white.JPG" /></li>
 87         <li><img _src="img/2.jpg" src="img/white.JPG" /></li>
 88         <li><img _src="img/3.jpg" src="img/white.JPG" /></li>
 89         <li><img _src="img/4.jpg" src="img/white.JPG" /></li>
 90         <li><img _src="img/5.jpg" src="img/white.JPG" /></li>
 91         <li><img _src="img/6.jpg" src="img/white.JPG" /></li>
 92         <li><img _src="img/7.jpg" src="img/white.JPG" /></li>
 93         <li><img _src="img/1.jpg" src="img/white.JPG" /></li>
 94         <li><img _src="img/2.jpg" src="img/white.JPG" /></li>
 95         <li><img _src="img/3.jpg" src="img/white.JPG" /></li>
 96         <li><img _src="img/4.jpg" src="img/white.JPG" /></li>
 97         <li><img _src="img/5.jpg" src="img/white.JPG" /></li>
 98         <li><img _src="img/6.jpg" src="img/white.JPG" /></li>
 99         <li><img _src="img/7.jpg" src="img/white.JPG" /></li>
100         <li><img _src="img/1.jpg" src="img/white.JPG" /></li>
101         <li><img _src="img/2.jpg" src="img/white.JPG" /></li>
102         <li><img _src="img/3.jpg" src="img/white.JPG" /></li>
103         <li><img _src="img/4.jpg" src="img/white.JPG" /></li>
104         <li><img _src="img/5.jpg" src="img/white.JPG" /></li>
105         <li><img _src="img/6.jpg" src="img/white.JPG" /></li>
106         <li><img _src="img/7.jpg" src="img/white.JPG" /></li>
107     </ul>
108 </body>
109 </html>

浏览器第一次打开页面时，只会加载当前屏幕内的图片（由于这里页面中的img标签是写死的，所以没有用到图片对象）。页面中图片的src属性可以是一个loading.gif图片，真正的图片路径存放在_src属性中。当前屏幕内的图片完成加载后，给当前页内图片添加 isLoad 属性是 true，这样下次再到当前区域内时，由于有这个属性，就不会重复加载这张图片了。

当滚动浏览器滚动条，触发了 window.onscroll 事件后，程序继续执行，会不断加载剩下符合当前区域内的图片。

性能的影响，主要是在for循环中。每次滚动事件发生，都要去执行遍历。