天天看點

圖檔預加載和懶加載的實作方法

圖檔預加載,即圖檔提前加載,可以保證圖檔快速、無縫的釋出,使用者需要檢視時可直接從本地緩存中渲染,适用于圖檔占據很大比例的網站。

一、懶加載

将圖檔src指派為一張預設的圖檔,當使用者滾動到可視區域的時候,再去加載真正的圖檔;

代碼實作:

圖檔預加載和懶加載的實作方法

html代碼

圖檔預加載和懶加載的實作方法

js代碼

vue中實作懶加載

對于圖檔過多的頁面,為了加速頁面加載速度,是以很多時候我們需要将頁面内未出現在可視區域内的圖檔先不做加載, 等到滾動到可視區域後再去加載。這樣子對于頁面加載性能上會有很大的提升,也提高了使用者體驗。

圖檔預加載和懶加載的實作方法
圖檔預加載和懶加載的實作方法
圖檔預加載和懶加載的實作方法
圖檔預加載和懶加載的實作方法
圖檔預加載和懶加載的實作方法

vue檔案

圖檔預加載和懶加載的實作方法

main.js

圖檔預加載和懶加載的實作方法

繼續閱讀