資料延遲載入元件

2021-08-25 04:18:54 字數 1588 閱讀 2133

引:

目前流行的頁面延遲載入以及渲染元件,參考 kissy 所寫,練習一下yui3模組編寫。

原理:

2.對於螢幕外延遲渲染的html存放在隱藏(visibility:hidden)的textarea中,並且該textarea佔據本該渲染的位置,監控窗體滾動,當textarea進入可見區域,將該textarea內的value,插入到textarea之前,並刪除掉textarea。

ps:近來重構

kissy 的一些注意點:

1.注意 textarea 內容包含指令碼時的情況,由於非firefox瀏覽器不會自動觸發其中的指令碼,不應該在將html插入到textarea的父結點後,在父節點下搜尋script 節點對其內容進行觸發(會使原本存在的指令碼再次執行),而應該對textarea的內容html進行正規表示式 script 抽取,並對html過濾script後再插入容器,這樣也避免了瀏覽器判斷。

2.callback 沒有意義,我們關心的是什麼時候 textarea 的內容會被渲染到 dom 樹中,隨之進行一些 關聯textarea部分的內容 元件初始化操作,而不需要已經存在於dom數中的節點何時會在使用者的預查區域(確實需要的話可將該節點內容放入textarea中做延遲渲染)。

3.觸發渲染事件注意使用settimeout非同步,由於可能使用者在當前位置重新整理,這時在初始化 datalazyloader 時就會發生渲染事件,那麼在初始化後的捕捉就沒有意義了:

var l=new lazyloader();//可能一開始就觸發了render事件,這時尚沒有on

l.on("render",function(){});

**結構:

/**

yui3資料延遲載入元件

修改自:

**/yui.add('datalazyload', function (y)

datalazyload.name = "datalazyload";

datalazyload.attrs = }};

y.extend(datalazyload, y.base, ,

//初始化函式

initializer: function (cfg) ,

//根據滾動條位置開始延遲載入

_loadbythreshold: function () {},

// the destroy() lifecycle phase

destructor: function () {}

});y.datalazyload = datalazyload;

});

呼叫:

yui(

}}).use("datalazyload", function (y) );

//即將由於延遲載入而顯示的元素

datalazyload.on("lazyshow", function (e) );

});

開發vue延遲載入元件

vue的單頁面應用訪問速度一般情況下已經很快了,不過對於比較複雜的頁面首次開啟的時候會很慢,慢的原因呢主要涉及如下兩個方面 1 dom元素較多,首次開啟時需要進行太多的渲染和判斷,而這些渲染和判斷大多數往往都不是首次開啟頁面時需要消耗的。2 多數首次不顯示的的dom元素,或者子元件載入時會呼叫aja...

EXT元件的使用和延遲載入

元件可以直接通過new 關鍵子來建立,比如控制項乙個視窗,使用new ext.window 建立乙個 則使用new ext.gridpanel 當然,除了一些普通的元件以外,一般都會在構 造函式中通過傳遞構造引數來建立元件。元件的建構函式中一般都可以包含乙個物件,這個物件包含建立元件所需要的配置屬性...

懶載入 延遲載入

概念 為了推遲和資料庫互動的時間,推遲到真正需要這個物件資料的時候。提高系統的效能 通過 asm和cglib二個jar包實現懶載入。domain是非final的 1 session.load懶載入 1 返回的是乙個 物件,new關鍵字來建立乙個 物件,理解成乙個快捷方式,不是真正的類,而是 類。2 ...