img加载本地图片_layui.flow(layui的流加载)，图片懒加载，炒鸡好用哦~

目录

1. 前言

2. flow模块参数：官方说明

3. 案例代码

1.前言

layui.flow官方api文档：https://www.layui.com/doc/modules/flow.html

读完本文您将了解到：layui的滚动流加载，手动流加载，以及图片的懒加载。

1.滚动加载：拖动右边的滚动条，即可获取新的数据，效果图如下。

2.手动加载：点击【加载更多】，即可获取新的数据，效果图如下。

3.图片懒加载：始终加载当前屏的图片，减轻网站因为大量图片可能带来的压力。

先来看下最终的效果图。

2.flow模块参数：官方说明

elem	指定列表容器的选择器
scrollElem	滚动条所在元素选择器，默认document。如果你不是通过窗口滚动来触发流加载，而是页面中的某一个容器的滚动条，那么通过该参数指定即可。
isAuto	是否自动加载。默认true。如果设为false，点会在列表底部生成一个“加载更多”的button，则只能点击它才会加载下一页数据。
end	用于显示末页内容，可传入任意HTML字符。默认为：没有更多了
isLazyimg	是否开启图片懒加载。默认false。如果设为true，则只会对在可视区域的图片进行按需加载。但与此同时，在拼接列表字符的时候，你不能给列表中的img元素赋值src，必须要用lay-src取代
done	到达临界点触发加载的回调。信息流最重要的一个存在。携带两个参数：done: function(page, next){}
图片懒加载的elem	指定开启懒加载的img元素选择器，如 elem: ‘.demo img’ 或 elem: ‘img.load’

3.案例代码

主要注意elem，scrollElem，isAuto，isLazyimg，end，done这些参数的含义，在上面已经说明。

a. 滚动加载时：isAuto这个值不需要，因为默认是true，意思是自动加载。

b. 手动加载时：isAuto赋值为false，关闭自动加载。end也可以赋值下，当没有数据时，会显示end赋值的提示语。

c. 图片懒加载时：列表中的img元素赋值src，必须要用lay-src取代。始终加载当前屏的图片，减轻网站因为大量图片可能带来的压力。

注：以下代码可参考layui官方代码示例https://www.layui.com/demo/flow.html

<fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">    <legend>滚动加载legend>fieldset><ul class="flow-default" style="height: 100px;" id="LAY_demo1">ul><fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">    <legend>手动点击加载legend>fieldset><ul class="flow-default" style="height: 100px;" id="LAY_demo2">ul><fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">    <legend>图片懒加载legend>fieldset><%--以下图片都是本地图片--%><div class="site-demo-flow" id="LAY_demo3">    <img lay-src="../image/1.jpg">    <img lay-src="../image/2.jpg">    <img lay-src="../image/3.jpg">    <img lay-src="../image/4.jpg">    <img lay-src="../image/5.jpg">    <img lay-src="../image/6.jpg">    <img lay-src="../image/7.jpg">    <img lay-src="../image/8.jpg">    <img lay-src="../image/9.jpg">    <img lay-src="../image/10.jpg">div><script src="layuiadmin/layui/layui20200514.js">script><script src="layuiadmin/layui/layui.all.20200514.js">script><script>    layui.use('flow', function () {        var flow = layui.flow;        flow.load({            elem: '#LAY_demo1' //流加载容器            , scrollElem: '#LAY_demo1' //滚动条所在元素选择器            ,end:'亲，没有更多数据了哦'            , done: function (page, next) { //执行下一页的回调 (到达临界点(默认滚动触发)，触发下一页)                //模拟数据插入                setTimeout(function () {                    var lis = [];                    for (var i = 0; i < 3; i++) {                        lis.push('滚动加载:' + ((page - 1) * 3 + i + 1) + '')                    }                    //执行下一页渲染，第二参数为：满足“加载更多”的条件，即后面仍有分页                    //pages为Ajax返回的总页数，只有当前页小于总页数的情况下，才会继续出现加载更多                    next(lis.join(''), page < 5); //假设总页数为 5                }, 500);            }        });        flow.load({            elem: '#LAY_demo2' //流加载容器            , scrollElem: '#LAY_demo2' //滚动条所在元素选择器            , isAuto: false//是否自动加载。默认true。如果设为false，点会在列表底部生成一个“加载更多”的button，则只能点击它才会加载下一页数据。            , isLazyimg: true//是否开启图片懒加载。默认false。如果设为true，则只会对在可视区域的图片进行按需加载。但与此同时，在拼接列表字符的时候，你不能给列表中的img元素赋值src，必须要用lay-src取代，            ,end:'亲，没有更多数据了哦'            , done: function (page, next) { //加载下一页                //模拟插入                setTimeout(function () {                    var lis = [];                    for (var i = 0; i < 3; i++) {                        lis.push('手动点击加载:' + ((page - 1) * 3 + i + 1) + '')                    }                    next(lis.join(''), page < 5); //假设总页数为 5                }, 500);            }        });        //图片懒加载 按屏加载图片        //当你执行这样一个方法时，即对页面中的全部带有lay-src的img元素开启了懒加载(当然你也可以指定相关img)        flow.lazyimg({            elem: '#LAY_demo3 img'            , scrollElem: '#LAY_demo3' //一般不用设置，此处只是演示需要。        });    });script>