懶加載原理分析

時間 2019-11-10

標籤加載原理分析简体版

原文原文鏈接

最近添加了相冊功能到網站上，一旦打開瀏覽器就會加載大量圖片，從而形成頁面的卡頓和跳動，同時對服務器也形成必定的壓力。因此很顯然須要用到懶加載功能。javascript

懶加載的概念，就是等到讓圖片出如今瀏覽器中的窗口的時候再去加載該圖片資源。這樣避免網頁在同一時間加載過多資源出現的頁面卡死。css

牛刀小試

現有插件不少，我也直接拿來用了，推薦使用 jQuery 的 lazyload.js ，大體闡述一下它的用法。html

<!-- 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設置高度。就以上代碼而言，對開發者仍是很是透明的。java

原理剖析

從上面的代碼看，可得當加載該圖片時，src 會讀取 data-original 的數據，這只是該插件的一個規定，在後面咱們能夠取任何的 data- 做爲加載資源。jquery

懶加載的關鍵仍是判斷圖片什麼時候開始加載，本質就是圖片什麼時候'露頭' ，來看看瀏覽器與整個頁面的位置關係圖。瀏覽器

以從上往下滑動的來加載爲例(左右滑動同理)。判斷它是否已經加載到滑到了瀏覽器的視區能夠經過三個高度決定。服務器

視窗上方高度: document.body.scrollTop
視窗高度: window.innerHeight
圖片相對於文檔的高度: 圖片DOM.offsetTopapp

因爲 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>

這樣就實現了一個簡單的懶加載功能。網站

總結

對頁面上元素的寬高和相對距離有必定認識後，基本的懶加載實現起來其實也很簡單，從而解決了資源加載和用戶體驗上的一些痛點。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。