惰性載入

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