 流加载文档 - layui.flow

flow模块包含两个核心方法，如下所示：

layui.use('flow', function(){
  var flow = layui.flow;
  //信息流
  flow.load(options);

  //图片懒加载
  flow.lazyimg(options);
});
      

下面将对她们进行详细介绍。

信息流即异步逐页渲染列表元素，这是你页面已经存在的一段列表，你页面初始时只显示了6个

      


  <li>1</li>
  <li>2</li>
  ……
  <li>6</li>

      
      

你想通过加载更多来显示余下列表，那么你只需要执行方法：flow.load(options) 即可

layui.use('flow', function(){
  var $ = layui.jquery; //不用额外加载jQuery，flow模块本身是有依赖jQuery的，直接用即可。
  var flow = layui.flow;
  flow.load({
    elem: '#demo' //指定列表容器
    ,done: function(page, next){ //到达临界点（默认滚动触发），触发下一页
      var lis = [];
      //以jQuery的Ajax请求为例，请求下一页数据（注意：page是从2开始返回）
      $.get('/api/list?page='+page, function(res){
        //假设你的列表返回在data集合中
        layui.each(res.data, function(index, item){
          lis.push('
'+ item.title +'
');
        });

        //执行下一页渲染，第二参数为：满足“加载更多”的条件，即后面仍有分页
        //pages为Ajax返回的总页数，只有当前页小于总页数的情况下，才会继续出现加载更多
        next(lis.join(''), page < res.pages);
      });
    }
  });
});
      

上述是一个比较简单的例子，以下是信息流完整的参数支撑（即options对象），它们将有助于你更灵活地应对各种场景

layui.each(res.data, function(index, item){
  lis.push('<li><img lay-src="'+ item.src +'"></li>');
});
            

done: function(page, next){
  //请注意：layui 1.0.5 之前的版本是从第2页开始返回，也就是说你的第一页数据并非done来触发加载
  （为之前这个愚蠢的设计表示抱歉）
  //从 layui 1.0.5 的版本开始，page是从1开始返回，初始时即会执行一次done回调。
  //console.log(page) //获得当前页

  //执行下一页渲染，第二参数为：满足“加载更多”的条件，即后面仍有分页
  //只有当前页小于总页数的情况下，才会继续出现加载更多
  next('列表HTML片段', page < res.pages);
}
            

应该说比当前市面上任何一个懒加载的实现都更为强劲和轻量，她用不足80行代码巧妙地提供了一个始终加载当前屏图片的高性能方案（无论上滑还是下滑）。对你的网站因为图片可能带来的压力，可做出很好的应对。

语法：flow.lazyimg(options)

layui.use('flow', function(){
  var flow = layui.flow;
  //当你执行这样一个方法时，即对页面中的全部带有 lay-src 的 img 元素开启了懒加载（当然你也可以指定相关 img）
  flow.lazyimg();
});
      

如上所述，它只会针对以下 img 元素有效：

<img src="占位图地址" lay-src="预加载图地址">
<img src="" src="bbb.jpg">
<img src="" lay-src="ccc.jpg">
      

占位图功能为 layui 2.6.6 开始新增。 这本应在 1.0 就该支持，但由于重心在其他组件，导致姗姗来迟。

如你所见，图片懒加载的使用极其简单，其参数（options 对象）可支持的 key 如下表所示：

如果还有各种流行的流加载，你可以给我们提供建议，我们会在layui后续版本中选择性加入。