很多頁面，內容很豐富，頁面很長，圖片較多。比如說各種商城頁面。這些頁面圖片數量多，而且比較大，少說百來K，多則上兆。要是頁面載入就一次性加載完畢，時間消耗很大，同時也比較浪費資源。
懶加載也就是延遲加載，可以很好解決頁面圖片加載的問題。
原理：
頁面中的img元素，如果沒有src屬性，瀏覽器就不會發出請求下載圖片，只有通過javascript設置了圖片路徑，瀏覽器才會發送請求。當訪問一個頁面的時候，先把img元素或是背景圖片路徑替換成一張大小為1*1像素圖片的路徑（只需請求一次，俗稱占位圖），把正真的路徑存在元素的data-original屬性(此屬性是自己設置的)，只有當圖片出現在瀏覽器的可視區域內時，才設置圖片正真的路徑，讓圖片顯示出來。
實現步驟：
(1)首先，不要將圖片地址放到src屬性中，src中可以放預加載的小圖片，真正的圖片路徑放到其它屬性(data-original)中。
(2)頁面加載完成后，根據scrollTop判斷圖片是否在用戶的視野內，如果在，則將data-original屬性中的值取出存放到src屬性中。
(3)在滾動事件中重復判斷圖片是否進入視野，如果進入，則將data-original屬性中的值取出存放到src屬性中。
優點
頁面加載速度快、可以減輕服務器的壓力、節約了流量,用戶體驗好.
遠近互聯前端小王整理發布，希望能對學習技術的你有所幫助
遠近互聯專業提供網站建設、APP開發、網站優化、外貿網站SEO、微信運營的品牌整合營銷服務讓客戶通過網絡品牌建立與網絡傳播提高業績。
【相關推薦】
