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 ...