懶載入
通過監聽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 事件的位置前後順序關係 關於的預載入,你所不知道的 載入的過程是非同步的 一 懶載入 介紹 目的 二 預載入 介紹 目的 這對畫廊及佔據很大比例的 來說十分有利,它保證了快速 無縫地發布,也可幫助使用...
懶載入和預載入
預載入 預載入就是在網頁全部載入之前,提前載入。當使用者需要檢視時可直接從本地快取中渲染,以提供給使用者更好的體驗,減少等待的時間。否則,如果乙個頁面的內容過於龐大,沒有使用預載入技術的頁面就會長時間的展現為一片空白,這樣瀏覽者可能以為預覽慢而沒興趣瀏覽,把網頁關掉,這時,就需要預載入。當然這種做法...