1.ストリームの読み込みには、情報ストリームの読み込みと画像の遅延読み込みの2つのコアサポートが含まれます。これらは、サーバーとフロントエンドエクスペリエンスの両方のパフォーマンスに大きく役立ちます。
2.モジュールのロード名：フロー。
3.フローモジュールには2つのコアメソッドが含まれています
3.1。フローモジュールには、情報フローと画像の遅延読み込みという2つのコアメソッドが含まれています。
layui.use('flow', function(){
var flow = layui.flow;
// 信息流
flow.load(options);
// 图片懒加载
flow.lazyimg(options);
});4.情報の流れ
4.1。情報の流れは、リスト要素をページごとに非同期にレンダリングすることです。これは、ページに既に存在するリストです。最初は、ページには6つしか表示されません。
<ul id="test1">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
</ul>4.2。さらにロードして残りのリストを表示する場合は、メソッドflow.load（options）を実行するだけで済みます。
<script type="text/javascript">
layui.use('flow', function(){
var flow = layui.flow;
flow.load({
elem: '#test1' // 指定列表容器的选择器
,done: function(page, next){ // 执行下一页的回调
// 模拟数据插入
setTimeout(function(){
var lis = [];
for(var i = 0; i < 8; i++){
lis.push('<li>'+ ((page - 1) * 8 + i + 1 ) +'</li>')
}
// 执行下一页渲染, 第二参数为: 满足"加载更多"的条件, 即后面仍有分页。
// pages为服务器返回的总页数, 只有当前页小于总页数的情况下, 才会继续出现加载更多。
next(lis.join(''), page < 10); // 假设总页数为10
}, 500);
}
});
});
</script>5.以下は、情報フロー（つまり、オプションオブジェクト）の完全なパラメータサポートです。
6.画像の遅延読み込み
6.1。構文：flow.lazyimg（options）。
<script type="text/javascript">
layui.use('flow', function(){
var flow = layui.flow;
// 按屏加载图片
// 当你执行这样一个方法时, 即对页面中的全部带有lay-src的img元素开启了懒加载(当然你也可以指定相关img)
flow.lazyimg({
elem: '#test2 img'
,scrollElem: '#test2' // 滚动条所在元素选择器, 默认document
});
});
</script> 6.2。上記のように、次のimg要素に対してのみ機能します。
<img lay-src="aaa.jpg" alt="該图懒加载" />
<img src="bbb.jpg" alt="該图不会懒加载" />
<img lay-src="ccc.jpg" alt="該图懒加载" /> 6.3。画像の遅延読み込みの使用は非常に簡単で、そのパラメーター（オプションオブジェクト）でサポートされているキーを次の表に示します。
7.例
7.1。コード
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>流加载 - layui</title>
<link rel="stylesheet" href="layui/css/layui.css">
<script type="text/javascript" type="text/javascript" src="layui/layui.js"></script>
<style type="text/css">
#test1, #test2 { width: 630px; height: 400px; overflow: scroll; }
#test1, #test2 { padding: 0px; }
#test1 li, #test2 img { width: 300px; height: 150px; margin-top: 10px; }
#test1 li { background-color: rgb(238, 238, 238); display: inline-block; }
#test2 { font-size: 0px; }
#test1 li:nth-child(even), #test2 img:nth-child(even) { margin-left: 10px; }
#test1 li:nth-child(1), #test1 li:nth-child(2), #test2 img:nth-child(1), #test2 img:nth-child(2) { margin-top: 0px; }
</style>
</head>
<body>
<ul id="test1"></ul>
<div id="test2">
<img lay-src="home_ani_01.png" alt="" />
<img lay-src="home_ani_02.png" alt="" />
<img lay-src="home_ani_03.png" alt="" />
<img lay-src="home_ani_04.png" alt="" />
<img lay-src="home_ani_05.png" alt="" />
<img lay-src="home_ani_06.png" alt="" />
<img lay-src="home_ani_07.png" alt="" />
<img lay-src="home_ani_08.png" alt="" />
<img lay-src="home_ani_09.png" alt="" />
<img lay-src="home_ani_10.png" alt="" />
<img lay-src="home_ani_11.png" alt="" />
<img lay-src="home_ani_12.png" alt="" />
<img lay-src="home_ani_13.png" alt="" />
<img lay-src="home_ani_14.png" alt="" />
<img lay-src="home_ani_15.png" alt="" />
<img lay-src="home_ani_16.png" alt="" />
<img lay-src="home_ani_17.png" alt="" />
<img lay-src="home_ani_18.png" alt="" />
<img lay-src="home_ani_19.png" alt="" />
<img lay-src="home_ani_20.png" alt="" />
<img lay-src="home_ani_21.png" alt="" />
<img lay-src="home_ani_22.png" alt="" />
</div>
<script type="text/javascript">
layui.use('flow', function(){
var flow = layui.flow;
flow.load({
elem: '#test1' // 指定列表容器的选择器
,scrollElem: '#test1' // 滚动条所在元素选择器, 默认document
,end: '我也是有底线的' // 用于显示末页内容
,isAuto: true // 是否自动加载
,mb: 100 // 与底部的临界距离
,done: function(page, next){ // 执行下一页的回调
// 模拟数据插入
setTimeout(function(){
var lis = [];
for(var i = 0; i < 8; i++){
lis.push('<li>'+ ((page - 1) * 8 + i + 1 ) +'</li>')
}
// 执行下一页渲染, 第二参数为: 满足"加载更多"的条件, 即后面仍有分页。
// pages为服务器返回的总页数, 只有当前页小于总页数的情况下, 才会继续出现加载更多。
next(lis.join(''), page < 10); // 假设总页数为10
}, 500);
}
});
// 按屏加载图片
// 当你执行这样一个方法时, 即对页面中的全部带有lay-src的img元素开启了懒加载(当然你也可以指定相关img)
flow.lazyimg({
elem: '#test2 img'
,scrollElem: '#test2' // 滚动条所在元素选择器, 默认document
});
});
</script>
</body>
</html>7.2。効果画像
