023-流加载

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">
		<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. 效果图

猜你喜欢