延時載入(lazy load)

2021-08-07 17:07:05 字數 648 閱讀 1036

1. 什麼是延時載入?

相關背景:

當專案中的頁面需要載入大量的時,如果不進行相關的優化處理,顯然頁面的效能和對使用者的體驗是非常不友好的。如果3s還沒有載入完成,使用者很可能直接關掉你的頁面。

優化的方式有很多,首先從源頭來講,可以對載入的資訊進行優化處理,**精簡減少冗餘。和—–延時載入。

定義:

延時載入 即 當在真正需要資料的時候,才真正執行資料載入操作。是一種對載入方式的優化,相對於一次性載入完整個頁面的所有檔案。它更靈活,更快速(從使用者體驗角度)。

2.延時載入的三種實現方式

這裡列舉常見的三種延時載入的實現方式:

第一種:

首先,頁面上的src 設定為: loading.gif

的真實路徑設定在data-src中。

當出現在瀏覽器視口時,將的src設定為data-src的值,即可實現延時載入。

該方法缺點:效能差。

第二種 :

直接將函式綁在scroll事件上,頁面滾動時,函式會被高頻觸發,影響效能。

坐事件繫結時,可以對lazyload函式進行函式節流和函式去抖處理。

第三種:

使用交叉觀察器intersectionobserverapi(傳送門:阮一峰大神的詳解) 自動觀察元素是否可見。

Lazyload 延遲載入效果

lazyload是通過延遲載入來實現按需載入,達到節省資源,加快瀏覽速度的目的。網上也有不少類似的效果,這個lazyload主要特點是 支援使用window 視窗 或元素作為容器物件 對靜態 位置大小不變 元素做了大量的優化 支援垂直 水平或同時兩個方向的延遲。程式說明 基本原理 首先要有乙個容器物...

LazyLoad 延遲載入 按需載入

1 實際需求 那麼我們的 卻為100 的使用者載入了 3個 螢幕的所有內容。如果可以按需載入內容。就可以節約更多資源,做更多好的應用。2 解決方案 用客戶端語言來判斷使用者當前的可視範圍,只載入使用者可視範圍的內容。最主要的是。因為文字資訊,相對較小,其他多 內容相對占用伺服器流量更多。3 演示例子...

IOS中的懶載入lazyLoad

初步寫一些自己對於lazyload的看法吧。這篇文章主要針對普通view,對於image相關的的懶載入,準備過幾天研究一下在寫。懶載入,又稱為延遲載入。通常用法,你有乙個uitextfield型別的property,簡單定義為usernametextfield,但是你不在初始化方法裡為其alloc ...