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