最近添加了相冊功能到網站上，一旦打開瀏覽器就會加載大量圖片，從而造成頁面的卡頓和跳動，同時對服務器也造成一定的壓力。所以很顯然需要用到懶加載功能。
懶加載的概念，就是等到讓圖片出現在瀏覽器中的窗口的時候再去加載該圖片資源。這樣避免網頁在同一時間加載過多資源出現的頁面卡死。
牛刀小試
現有插件很多，我也直接拿來用了，推薦使用 jQuery 的 lazyload.js ，大致闡述一下它的用法。
<!-- css --> <style> img.lazy { /* 設置寬高 */ } </style> <!-- html --> <div> <img class="lazy" src="1px*1px的圖片" data-original="要加載的圖片" /> <img class="lazy" src="1px*1px的圖片" data-original="要加載的圖片" /> <img class="lazy" src="1px*1px的圖片" data-original="要加載的圖片" /> <img class="lazy" src="1px*1px的圖片" data-original="要加載的圖片" /> </div> <!-- js --> <script src="//apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script> <script src="//apps.bdimg.com/libs/jquery-lazyload/1.9.5/jquery.lazyload.js"></script> <script> $('img.lazy').lazyload({ // 可設置加載時的動畫等屬性 effect: 'fadeIn' }); </script> 引入這個插件后短短兩三行代碼就能啟用頁面上所有 class 為 lazy 的 img 標簽進行懶加載了，同時可配置加載效果。加載時會把 data-original 的資源替換掉 src 的 資源，為了避免頁面跳動和更好的用戶體驗，一般會設置一個默認的 1px × 1px 的圖片 (若服務器壓力大則可不設置) 並且給Img設置高度。就以上代碼而言，對開發者還是非常透明的。
原理剖析
從上面的代碼看，可得當加載該圖片時，src 會讀取 data-original 的數據，這只是該插件的一個規定，在后面我們可以取任何的 data- 作為加載資源。
懶加載的關鍵還是判斷圖片何時開始加載，本質就是圖片何時'露頭' ，來看看瀏覽器與整個頁面的位置關系圖。
以從上往下滑動的來加載為例(左右滑動同理)。判斷它是否已經加載到滑到了瀏覽器的視區可以通過三個高度決定。
視窗上方高度: document.body.scrollTop視窗高度: window.innerHeight圖片相對於文檔的高度: 圖片DOM.offsetTop
由於 scrollTop 是個變值，所以需要監聽它的數值變化，簡單整理后如下:
<!-- html --> <body> <div style="width:100%;height:900px;"></div> <div style="width:100%;height:300px;margin-top:50px;padding-top:50px"> <img id="lazy" src="" data-src="資源路徑" /> </div> </body> <!-- js --> <script> window.onmousewheel = function() { // 可設置 xWill 確定圖片在離視區多少高度時就加載 var lazyPic = document.getElementById('lazy'); if (lazyPic.offsetTop <= (window.innerHeight + document.body.scrollTop + xWill)) { lazyPic.setAttribute('src', lazyPic.getAttribute('data-src')); } }; </script> 這樣就實現了一個簡單的懶加載功能。
總結
對頁面上元素的寬高和相對距離有一定認識后，基本的懶加載實現起來其實也很簡單，從而解決了資源加載和用戶體驗上的一些痛點。