Framework7 - 延迟加载
描述
延迟加载会延迟给定页面上的图像加载过程。延迟加载可提高滚动性能、加快页面加载速度并节省流量。
延迟加载元素和图像必须位于可滚动的 <div class = "page-content"> 内才能正常工作。
下表演示了延迟加载的使用 −
| S.No | 延迟加载用法和说明 |
|---|---|
| 1 | 用法
延迟加载可应用于图像、背景图像并具有淡入效果。 |
| 2 | 手动初始化延迟加载
初始化页面，如果你手动添加延迟加载图片，那么延迟加载将不起作用，你需要使用方法来初始化它。 |
可以通过在延迟图像/元素上使用 lazy 事件手动触发图像加载，如下所示 −
$$('img.lazy').trigger('lazy');
$$('div.lazy').trigger('lazy');
示例
以下示例演示了 Framework7 中延迟加载的使用 −
<!DOCTYPE html>
<html class = "with-statusbar-overlay">
<head>
<meta name = "viewport" content = "width = device-width, initial-scale = 1,
maximum-scale = 1, minimum-scale = 1, user-scalable = no, minimal-ui" />
<meta name = "apple-mobile-web-app-capable" content = "yes" />
<meta name = "apple-mobile-web-app-status-bar-style" content = "black" />
<title>Lazy Load</title>
<link rel = "stylesheet"
href = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.ios.min.css" />
<link rel = "stylesheet"
href = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.ios.colors.min.css" />
</head>
<body>
<div class = "views">
<div class = "view view-main">
<div class = "pages">
<div data-page = "home" class = "page navbar-fixed">
<div class = "navbar">
<div class = "navbar-inner">
<div class = "left"> </div>
<div class = "center">Lazy Load</div>
<div class = "right"> </div>
</div>
</div>
<div class = "page-content">
<div class = "content-block">
<div class = "content-block-inner">
<p> <img data-src = "/framework7/images/pic4.jpg"
width = "100%" class = "lazy lazy-fadeIn"></p>
<p>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.</p>
<p> <img data-src = "/framework7/images/pic5.jpg"
width = "100%" class = "lazy lazy-fadeIn"></p>
<p>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.</p>
<p> <img data-src = "/framework7/images/background.jpg"
width = "100%" class = "lazy lazy-fadeIn"></p>
<p>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.</p>
<p> <img data-src = "/framework7/images/pic6.jpg"
width = "100%" class = "lazy lazy-fadeIn"></p>
<p>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.</p>
<p> <img data-src = "/framework7/images/pic7.jpg"
width = "100%" class = "lazy lazy-fadeIn"></p>
<p>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.</p>
<p> <img data-src = "/framework7/images/pic8.jpg"
width = "100%" class = "lazy lazy-fadeIn"></p>
<p>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.</p>
<p><b>Using as background image:</b></p>
<div data-background = "/framework7/images/pic7.jpg"
style = "background: #aaa; height:60vw; background-size-cover"
class = "lazy lazy-fadeIn">
</div>
<p>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.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script type = "text/javascript"
src = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/js/framework7.min.js"></script>
<script>var myApp = new Framework7();</script>
</body>
</html>
输出
让我们执行以下步骤来查看上述代码的工作原理 −
将上述 HTML 代码保存为服务器根文件夹中的 framework7_lazy_load.html 文件。
以 http://localhost/framework7_lazy_load.html 的形式打开此 HTML 文件，输出如下所示。
该示例指定了图像的延迟加载，当您向下滚动图像时，图像将在页面上加载。
