頁面有大量圖片，優化圖片的加載方法

1.　圖片懶加載，在頁面上的未可視區域能夠添加一個滾動條事件，判斷圖片位置與瀏覽器頂端的距離與頁面的距離，若是前者小於後者，優先加載。

　　什麼是圖片懶加載問題：

　　對於圖片過多的頁面，爲了加速頁面加載速度，
因此不少時候咱們須要將頁面內未出如今可視區域內的圖片先不作加載， 等到滾動到可視區域後再去加載。
這樣子對於頁面加載性能上會有很大的提高，也提升了用戶體驗。

如何實現

　　其實原理上很簡單，在頁面載入的時候將頁面上的img標籤的src指向一個小圖片， 把真實地址存放在一個自定義屬性中，這裏我用data-src來存放，以下。

<img src="loading.gif" data-src="http://xxx.ooo.com" /> 

而後將頁面img標籤獲取並保存，開啓一個定時器，遍歷保存的img標籤，
判斷其位置是否出如今了可視區域內。若是出如今可視區域了那麼就把真實的src地址給賦值上。
而且從數組中刪除，避免重複判斷。 那麼你可能會問，如何判斷是否出如今可視區域內嗎？
那就是你能夠獲取當前img的相對於文檔頂的偏移距離減去scrollTop的距離，
而後和瀏覽器窗口高度在進行比較，若是小於瀏覽器窗口則出如今了可視區域內了，
反之，則沒有。

實現：

　　這是來自一個老外的一段懶加載的代碼，代碼很小，1k不到，
很適合用在移動設備上，在兼容上沒作ie下的兼容，
這個你如要要用，你也能夠本身去實現一個兼容性更強的。

好了，直接上代碼了。（目前沒有測試，僅僅參考而已）

 

 1 /*! Echo v1.4.0 | (c) 2013 @toddmotto | MIT license | github.com/toddmotto/echo */
 2 window.Echo = (function (window, document, undefined) {
 3 
 4   'use strict';
 5 
 6   var store = [], offset, throttle, poll;
 7 
 8   var _inView = function (el) {
 9     var coords = el.getBoundingClientRect();
10     return ((coords.top >= 0 && coords.left >= 0 && coords.top) <= (window.innerHeight || document.documentElement.clientHeight) + parseInt(offset));
11   };
12   var _isDeal = function(el){
13       return el.getAttribute('src') === el.getAttribute('data-echo');
14   }
15   var _pollImages = function () {
16     for (var i = store.length; i--;) {
17       var self = store[i];
18       if (!_isDeal(self) && _inView(self)) {
19         self.src = self.getAttribute('data-echo');
20         store.splice(i, 1);
21       }
22     }
23   };
24 
25   var _throttle = function () {
26     clearTimeout(poll);
27     poll = setTimeout(_pollImages, throttle);
28   };
29 
30   var init = function (obj) {
31     var nodes = document.querySelectorAll('[data-echo]');
32     var opts = obj || {};
33     offset = opts.offset || 0;
34     throttle = opts.throttle || 250;
35 
36     for (var i = 0; i < nodes.length; i++) {
37       store.push(nodes[i]);
38     }
39 
40     _throttle();
41 
42     if (document.addEventListener) {
43       window.addEventListener('scroll', _throttle, false);
44     } else {
45       window.attachEvent('onscroll', _throttle);
46     }
47   };
48 
49   return {
50     init: init,
51     render: _throttle
52   };
53 
54 })(window, document);

 

另一個懶加載方法：

注意事項：須要真正實現圖片延遲加載，必須將真實圖片地址寫在 data-original 屬性中。若 src 與 data-original 相同，則只是一個特效而已，並不達到延遲加載的功能。

使用方法

載入 JavaScript 文件

<script src="jquery.js"></script> <script src="jquery.lazyload.js"></script> 

修改 HTML 代碼中須要延遲加載的 IMG 標籤

<!-- 將真實圖片地址寫在 data-original 屬性中，而 src 屬性中的圖片換成佔位符的圖片（例如 1x1 像素的灰色圖片或者 loading 的 gif 圖片） 添加 class="lazy" 用於區別哪些圖片須要延時加載，固然你也能夠換成別的關鍵詞，修改的同時記得修改調用時的 jQuery 選擇器 添加 width 和 height 屬性有助於在圖片未加載時佔滿所須要的空間 --> <img class="lazy" src="grey.gif" data-original="example.jpg" width="640" heigh="480">

http://code.ciaoca.com/jquery/lazyload/ 

調用 Lazy Load

$('img.lazy').lazyload();

2.　若是爲幻燈片、相冊等，可使用圖片預加載技術，將當前展現圖片的前一張和後一張優先下載。

預加載，見下一章節

3.　若是圖片爲css圖片，可使用CSSsprite，SVGsprite，Iconfont、Base64等技術。

4.　若是圖片過大，可使用特殊編碼的圖片，加載時會先加載一張壓縮的特別厲害的縮略圖，以提升用戶體驗。

5.　若是圖片展現區域小於圖片的真實大小，則因在服務器端根據業務須要先行進行圖片壓縮，圖片壓縮後大小與展現一致。