預載入和懶載入

2021-09-29 12:36:19 字數 740 閱讀 6808

懶載入

通過監聽scroll事件,判斷進入可視區域之後請求資源

對於電商等很多,頁面很長的業務場景適用

減少無效資源的載入

併發載入的資源過多會阻塞js的載入,影響**的正常使用

可以使用原生js或者引用zepto.min.js

var viewheight = document.documentelement.clientheight;//可視區域的高度

function lazyload()

item.removeattribute("data-original");

item.removeattribute("lazyload")

}()}

})}lazyload();

document.addeventlistener("scroll",lazyload)

預載入

等靜態資源在使用之前的提前請求

資源使用到時能從快取中載入,提公升使用者體驗

頁面展示的依賴關係維護

使用方法:

1)、img  設定display:none 

2)、var image =  new image()

image.src = ""

3)、可以使用xmlhttprequest  不過會涉及到跨域問題  優點就是更加方便操控預載入

4)、可以使用preload.js

懶載入和預載入

懶載入和預載入 懶載入的原理及實現 處理預載入時設定img 的src 屬性和img 的onload 事件的位置前後順序關係 關於的預載入,你所不知道的 載入的過程是非同步的 一 懶載入 介紹 目的 二 預載入 介紹 目的 這對畫廊及佔據很大比例的 來說十分有利,它保證了快速 無縫地發布,也可幫助使用...

懶載入和預載入

懶載入和預載入 懶載入的原理及實現 處理預載入時設定img 的src 屬性和img 的onload 事件的位置前後順序關係 關於的預載入,你所不知道的 載入的過程是非同步的 一 懶載入 介紹 目的 二 預載入 介紹 目的 這對畫廊及佔據很大比例的 來說十分有利,它保證了快速 無縫地發布,也可幫助使用...

懶載入和預載入

預載入 預載入就是在網頁全部載入之前,提前載入。當使用者需要檢視時可直接從本地快取中渲染,以提供給使用者更好的體驗,減少等待的時間。否則,如果乙個頁面的內容過於龐大,沒有使用預載入技術的頁面就會長時間的展現為一片空白,這樣瀏覽者可能以為預覽慢而沒興趣瀏覽,把網頁關掉,這時,就需要預載入。當然這種做法...