【性能優化】---懶加載---


001、什么是懶加載

懶加載也就是延遲加載
 
當訪問一個頁面的時候,先把img元素或是其他元素的背景圖片路徑替換成一張大小為1*1px圖片的路徑(這樣就只需請求一次,俗稱占位圖),只有當圖片出現在瀏覽器的可視區域內時,才設置圖片正真的路徑,讓圖片顯示出來。這就是圖片懶加載。

 

002、為什么要使用懶加載

很多頁面,內容很豐富,頁面很長,圖片較多。比如說各種商城頁面。這些頁面圖片數量多,而且比較大,少說百來K,多則上兆。有的時候沒有必要一次性加載完!詳情請看京東

 

003、懶加載實現的步驟

1、將圖片地址放在元素的自定義屬性中
 
2、當頁面加載完成后,根據scrollTop判斷圖片是否在用戶的視野內,如果在就取出屬性值放到src屬性中

 

004、懶加載的好處

頁面加載速度快,可以減輕服務器的壓力,節約流量,用戶體驗好

 

004、懶加載方案

 

 
        

 

其他懶加載方式以后再更新


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM