1. 流加载包含信息流加载和图片懒加载两大核心支持, 无论是对服务端、还是前端体验, 都有非常大的性能帮助。
2. 模块加载名称: flow。
3. flow模块包含两个核心方法
3.1. flow模块包含两个核心方法: 信息流和图片懒加载:
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. 以下是信息流完整的参数支撑(即options对象):
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. 图片懒加载的使用极其简单, 其参数(options对象)可支持的key如下表所示:
7. 例子
7.1. 代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>流加载 - layui</title>
<link rel="stylesheet" href="layui/css/layui.css" target="_blank" rel="external nofollow" >
<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. 效果图