惰性载入(英语: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

编辑

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