延迟加载

惰性加载(英语: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).