开发手册 欢迎您!
软件开发者资料库

Framework7 - 延迟加载

Framework7延迟加载 - 从概述,环境,布局,导航栏,工具栏,搜索栏,状态栏,侧面板,内容块,布局网格,叠加层,预加载器,进度条,列表视图,手风琴,卡片,芯片,按钮开始学习Framework7 ,动作按钮,窗体,选项卡,Swiper滑块,照片浏览器,自动完成,选择器,日历,刷新,无限滚动,消息,消息栏,通知,延迟加载,颜色主题,细线,模板概述,自动编译,Template7页面,活动状态,点击保持事件,触摸波纹。

描述

延迟加载会延迟您在给定页面上的图像加载过程.延迟加载可提高滚动性能,加快页面加载速度并节省流量.

延迟加载元素和图像必须位于可滚动的< div class ="page-content中">正常工作.

下表演示了延迟加载和减号的使用;

S.No延迟加载使用和描述
1用法

延迟加载可以应用于图像,背景图像和淡入效果.

2手动初始化延迟加载

初始化页面后,如果手动添加延迟加载图像,则延迟加载将不起作用并且你需要使用方法来初始化它.

有可能触发通过在惰性图像/元素上使用 lazy 事件手动加载图像,如下所示 :

$$('img.lazy').trigger('lazy');$$('div.lazy').trigger('lazy');

示例

以下示例演示了在Framework7中使用延迟加载 :

                           Lazy Load                                                                                                                                              
                        Lazy Load
                                                                                                                                                                            

 

                                                      

Lorem ipsum dolor sit amet, consectetur adipiscing elit,                               sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.                               Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris                               nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in                               reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla                               pariatur.

                                                      

 

                                                         

Sed ut perspiciatis unde omnis iste natus error sit                               voluptatem accusantium doloremque laudantium, totam rem aperiam,                               eaque ipsa quae ab illo inventore veritatis et quasi architecto                               beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia                               voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur                               magni dolores eos qui ratione voluptatem sequi nesciunt.

                                                      

 

                                                         

Lorem ipsum dolor sit amet, consectetur adipiscing elit,                               sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.                               Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris                               nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in                               reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla                               pariatur.

                                                      

 

                                                         

Sed ut perspiciatis unde omnis iste natus error sit voluptatem                               accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab                               illo inventore veritatis et quasi architecto beatae vitae dicta sunt                               explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut                               odit aut fugit, sed quia consequuntur magni dolores eos qui ratione                               voluptatem sequi nesciunt.

                                                      

 

                           

Lorem ipsum dolor sit amet, consectetur adipiscing elit,                               sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.                               Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris                               nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in                               reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla                               pariatur.

                                                      

 

                                                         

Lorem ipsum dolor sit amet, consectetur adipiscing elit.                               Praesent laoreet nisl eget neque blandit lobortis. Sed sagittis risus                               id vestibulum finibus. Cras vestibulum sem et massa hendrerit maximus.                               Vestibulum suscipit tristique iaculis. Nam vitae risus non eros auctor                               tincidunt quis vel nulla. Sed volutpat, libero ac blandit vehicula, est                               sem gravida lectus, sed imperdiet sapien risus ut neque.

                                                      

Using as background image:

                                                                                                                                       

Sed ut perspiciatis unde omnis iste natus error sit voluptatem                               accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab                               illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.                               Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit,                               sed quia consequuntur magni dolores eos qui ratione voluptatem sequi                               nesciunt.

                                                                                                                                                      

输出

让我们执行以下步骤,看看上面给出的代码如何工作 : 去;

  • 将上面给出的HTML代码保存为服务器根文件夹中的 framework7_lazy_load.html 文件.

  • 将此HTML文件打开为http://localhost/framework7_lazy_load.html,输出显示如下.

  • 该示例指定图像的延迟加载,当您向下滚动图像时,图像将在页面上加载.