Lazyload 延遲載入效果

2021-08-30 23:45:51 字數 991 閱讀 6964

lazyload是通過延遲載入來實現按需載入,達到節省資源,加快瀏覽速度的目的。

網上也有不少類似的效果,這個lazyload主要特點是:

支援使用window(視窗)或元素作為容器物件;

對靜態(位置大小不變)元素做了大量的優化;

支援垂直、水平或同時兩個方向的延遲。

程式說明

【基本原理】

首先要有乙個容器物件,容器裡面是_elems載入元素集合。

用隱藏或替換等方法,停止元素載入內容。

然後歷遍集合元素,當元素在載入範圍內,再進行載入。

載入範圍一般是容器的視框範圍,即瀏覽者的視覺範圍內。

當容器滾動或大小改變時,再重新歷遍元素判斷。

如此重複,直到所有元素都載入後就完成。

【容器物件】

程式一開始先用_initcontainer程式初始化容器物件。

先判斷是用window(視窗)還是一般元素作為容器物件:

var doc = document,

iswindow = container == window || container == doc

|| !container.tagname || (/^(?:body|html)$/i).test( container.tagname );

如果是window,再根據文件渲染模式選擇對應的文件物件:

if ( iswindow )

定義好執行方法後,再繫結scroll和resize事件:

this._binder = iswindow ? window : container;

$$e.addevent( this._binder, "scroll", this.delayload );

iswindow && $$e.addevent( this._binder, "resize", this.delayresize );

如果是window作為容器,需要繫結到window物件上,為了方便移除用了_binder屬性來儲存繫結物件。

LazyLoad 延遲載入 按需載入

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

延時載入(lazy load)

1.什麼是延時載入?相關背景 當專案中的頁面需要載入大量的時,如果不進行相關的優化處理,顯然頁面的效能和對使用者的體驗是非常不友好的。如果3s還沒有載入完成,使用者很可能直接關掉你的頁面。優化的方式有很多,首先從源頭來講,可以對載入的資訊進行優化處理,精簡減少冗餘。和 延時載入。定義 延時載入 即 ...

IOS中的懶載入lazyLoad

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