惰性載入

惰性載入(英語: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).