資源加載兩種方式:懶加載和預加載


懶加載
1、什么是懶加載?
懶加載也就是延遲加載。當訪問一個頁面的時候,先把img元素或是其他元素的背景圖片路徑替換成一張大小為1*1px圖片的路徑(這樣就只需請求一次,俗稱占位圖),只有當圖片出現在瀏覽器的可視區域內時,才設置圖片正真的路徑,讓圖片顯示出來。這就是圖片懶加載。
2、為什么要使用懶加載?
很多頁面,內容很豐富,頁面很長,圖片較多。比如說各種商城頁面。這些頁面圖片數量多,而且比較大,少說百來K,多則上兆。要是頁面載入就一次性加載完畢。估計大家都會等到黃花變成黃花菜了。
3、懶加載的原理是什么?
頁面中的img元素,如果沒有src屬性,瀏覽器就不會發出請求去下載圖片,只有通過javascript設置了圖片路徑,瀏覽器才會發送請求。
懶加載的原理就是先在頁面中把所有的圖片統一使用一張占位圖進行占位,把正真的路徑存在元素的“data-url”(這個名字起個自己認識好記的就行)屬性里,要用的時候就取出來,再設置;
4、懶加載的實現步驟?
方法一:第一種是純粹的延遲加載,使用setTimeOut或setInterval進行加載延遲.
方法二:是條件加載,符合某些條件,或觸發了某些事件才開始異步下載。
方法三:可視區加載,即僅加載用戶可以看到的區域,這個主要由監控滾動條來實現,一般會在距用戶看到某圖片前一定距離遍開始加載,這樣能保證用戶拉下時正好能看到圖片。
5、懶加載的意義?
頁面加載速度快、可以減輕服務器的壓力、減少請求數或延遲請求數

預加載
1、什么是預加載?
提前加載圖片,當用戶需要查看時可直接從本地緩存中渲染
2、為什么要使用預加載?
圖片預先加載到瀏覽器中,訪問者便可順利地在你的網站上沖浪,並享受到極快的加載速度。這對圖片畫廊及圖片占據很大比例的網站來說十分有利,它保證了圖片快速、無縫地發布,也可幫助用戶在瀏覽你網站內容時獲得更好的用戶體驗。
3、實現預加載的方法有哪些?
方法一:用CSS和JavaScript實現預加載
方法二:僅使用JavaScript實現預加載
方法三:使用Ajax實現預加載
4、預加載的意義
犧牲服務器前端性能,換取更好的用戶體驗,這樣可以使用戶的操作得到最快的反映。


免責聲明!

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



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