跳至內容

惰性載入

本頁使用了標題或全文手工轉換
維基百科,自由的百科全書
惰性載入是類似於卷軸瀑布的概念

惰性載入(英語:lazy loading、infinite scroll,又稱延遲載入[1]懶載入[2][3]無限捲動[4]瀑布流[4]),是一種設計模式,被運用在軟體設計網頁設計當中[5],對於網頁界面,其特徵為使用者透過滑鼠或觸控,捲動英語Scrolling瀏覽頁面,直到頁面下方時,才會依照Javascript等程式碼,發出連線請求,自動下載載入更多內容於同一網頁,以減少網路頻寬與裝置負擔;有多數網站採用這項網頁設計,例如Google圖片搜索Google+FacebookTwitterPinterestYoutube、部分論壇[6]和維基百科的Flow討論系統。部分新聞網站會接續載入其他與原內容不相關的其他內容於同一網頁,也有結合無限捲動和多,兩著特性的網頁設計,以便快速定位尋找內容[7]

此種設計的缺點是如果是比較後面的資料內容,就需要逐一等候載入,無法和傳統多頁式設計那樣,可以快速定位內容。

而對於數據結構而言,惰性載入是指從一個數據對象通過方法獲得裡面的一個屬性對象時,這個對應對象實際並沒有隨其父數據對象創建時一起保存在運行空間中,而是在其讀取方法第一次被調用時才從其他數據源中加載到運行空間中,這樣可以避免過早地導入過大的數據對象但並沒有使用的空間占用浪費。

實現

[編輯]

實現惰性載入的設計模式,有多種方式:

惰性初始模式

[編輯]
private int myWidgetID;
private Widget myWidget = null;
 
public Widget MyWidget 
{
    get 
    {
        if (myWidget == null) 
        {
            myWidget = Widget.Load(myWidgetID);
        }
        return myWidget;
        /* 也可使用 C# 的 null 联合运算子 ?? (x ?? y 相当于 x != null ? x : y):
         * return myWidget = myWidget ?? Widget.Load(myWidgetID);
         */
    }
}

Virtual proxy

[編輯]

Ghost

[編輯]

Value holder

[編輯]

jQuery的插件

[編輯]

JavaScript函式庫──jQuery的一些插件,有提供無限捲動的功能,例如Infinite Scroll插件[8]

參見

[編輯]

參考來源

[編輯]
  1. ^ Lazy Load 延遲圖片載入,讓網站更順暢. 香腸炒魷魚. [2015-03-29]. (原始內容存檔於2015-03-31). 
  2. ^ 奧革士. 慢網路的的聰明策略. Medium. [2015-03-29]. (原始內容存檔於2015-04-02). 
  3. ^ WordPress 中部署真正的懒加载(Lazy Load). DeveWork. [2015-03-29]. (原始內容存檔於2015-04-02). 
  4. ^ 4.0 4.1 無限滾動捲軸設計讓你看個沒完沒了,這是優點還是缺點?. TechOrange. [2015-03-29]. (原始內容存檔於2015-04-02). 
  5. ^ Lazy Load. Responsive Web Design. [2015-03-29]. (原始內容存檔於2015-04-02). 
  6. ^ Pinterest: Pinboards, Infinite-Scrolling, Lazy Loading, Adaptive Layouts. Youtube. [2015-03-29]. (原始內容存檔於2016-03-26). 
  7. ^ Items. [2015-03-29]. (原始內容存檔於2015-03-28). 
  8. ^ jScroll – jQuery Plugin for Infinite Scrolling / Auto-Paging. jQuery. [2015-03-29]. (原始內容存檔於2015-04-08).