For faster navigation, this Iframe is preloading the Wikiwand page for 延迟加载.

延迟加载

惰性加载是类似于卷轴瀑布的概念

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


{{bottomLinkPreText}} {{bottomLinkText}}
延迟加载
Listen to this article

This browser is not supported by Wikiwand :(
Wikiwand requires a browser with modern capabilities in order to provide you with the best reading experience.
Please download and use one of the following browsers:

This article was just edited, click to reload
This article has been deleted on Wikipedia (Why?)

Back to homepage

Please click Add in the dialog above
Please click Allow in the top-left corner,
then click Install Now in the dialog
Please click Open in the download dialog,
then click Install
Please click the "Downloads" icon in the Safari toolbar, open the first download in the list,
then click Install
{{::$root.activation.text}}

Install Wikiwand

Install on Chrome Install on Firefox
Don't forget to rate us

Tell your friends about Wikiwand!

Gmail Facebook Twitter Link

Enjoying Wikiwand?

Tell your friends and spread the love:
Share on Gmail Share on Facebook Share on Twitter Share on Buffer

Our magic isn't perfect

You can help our automatic cover photo selection by reporting an unsuitable photo.

This photo is visually disturbing This photo is not a good choice

Thank you for helping!


Your input will affect cover photo selection, along with input from other users.

X

Get ready for Wikiwand 2.0 🎉! the new version arrives on September 1st! Don't want to wait?