js中圖片的預加載演示

本文轉載自查看原文 2016-06-02 15:12 9786 JavaScript/ HTML

 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="width: 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循環中。每次滾動事件發生，都要去執行遍歷。

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 JS圖片預加載圖片預加載 js css預加載 js圖片預加載以及延遲加載圖片預加載插件 preLoad.js 網頁中圖片預加載的原理 js中的預加載與懶加載（延遲加載） [ html drawImage 圖片預加載 ] canvas繪制圖片 drawImage 屬性實例演示之三--使用New Image()進行圖片預加載 jquery 圖片預加載 javascript 圖片預加載 vue圖片預加載