1.什么是懶加載?
懶加載也叫延遲加載,當訪問一個頁面的時候,想把img元素或是或是其他元素背景圖片路徑替換成一張大小為1*1px的圖片的路徑(這樣只需請求一次俗稱占位),只有圖片出現在瀏覽器的可視區域內時才設置圖片的真實路徑,讓圖片顯示出來,這就是圖片懶加載。
2.為什么使用懶加載?
很多頁面內容豐富頁面較長圖片較多例如商城網站,而且還比較大多說能上兆,要是頁面第一次載入就全部加載完畢的話估計黃花菜都涼了。對於這種頁面有很多靜態資源的情況下,為了節省用戶流量和提高頁面性能,可以在用戶瀏覽到當前資源的時候,再對資源進行請求和加載。
3.懶加載原理是什么?
頁面中的img元素,如果沒有src屬性,瀏覽器就不會發出請求去下載圖片,只有通過javascript設置了圖片路徑,瀏覽器才會發送請求。 懶加載的原理就是先在頁面中把所有的圖片統一使用一張占位圖進行占位,把正真的路徑存在元素的“data-url”(這個名字起個自己認識好記的就行)屬性里,要用的時候就取出來,再設置。
4.懶加載實現步驟。
1).首先,不要將圖片地址放到src屬性中,而是放到其它屬性(data-original)中。
2).頁面加載完成后,根據scrollTop判斷圖片是否在用戶的視野內,如果在,則將data-original屬性中的值取出存放到src屬性中。
3).在滾動事件中重復判斷圖片是否進入視野,如果進入,則將data-original屬性中的值取出存放到src屬性中。
5.懶加載的有點。
頁面加載速度快,減輕服務器壓力,節省流量,提升用戶體驗
預加載
1.什么是預加載?
提前加載圖片,用戶需要時可以直接從本地緩存中渲染。
2.為什么使用預加載?
圖片預先加載到瀏覽器中,訪問者便可順利地在你的網站上沖浪,並享受到極快的加載速度。這對圖片畫廊及圖片占據很大比例的網站來說十分有利,它保證了圖片快速、無縫地發布,也可幫助用戶在瀏覽你網站內容時獲得更好的用戶體驗。
3.實現預加載的方法有哪些?
1).用CSS和JavaScript實現預加載
2).僅使用JavaScript實現預加載
3).使用Ajax實現預加載 詳見:http://web.jobbole.com/86785/
4.懶加載和預加載的對比
1).概念:懶加載也叫延遲加載:JS圖片延遲加載,延遲加載圖片或符合某些條件時才加載某些圖片。 預加載:提前加載圖片,當用戶需要查看時可直接從本地緩存中渲染。
2).區別:兩種技術的本質:兩者的行為是相反的,一個是提前加載,一個是遲緩甚至不加載。懶加載對服務器前端有一定的緩解壓力作用,預加載則會增加服務器前端壓力。
3).懶加載的意義及實現方式有:實現預載的方法非常多,比如:用CSS和JavaScript實現預加載;僅使用JavaScript實現預加載;使用Ajax實現預加載。 常用的是new Image();設置其src來實現預載,再使用onload方法回調預載完成事件。只要瀏覽器把圖片下載到本地,同樣的src就會使用緩存,這是最基本也是最實用的預載方法。當Image下載完圖片頭后,會得到寬和高,因此可以在預載前得到圖片的大小(方法是用記時器輪循寬高變化)。
意義: 懶加載的主要目的是作為服務器前端的優化,減少請求數或延遲請求數。
實現方式:
1.第一種是純粹的延遲加載,使用setTimeOut或setInterval進行加載延遲.
2.第二種是條件加載,符合某些條件,或觸發了某些事件才開始異步下載。
3.第三種是可視區加載,即僅加載用戶可以看到的區域,這個主要由監控滾動條來實現,一般會在距用戶看到某圖片前一定距離遍開始加載,這樣能保證用戶拉下時正好能看到圖片。