layui-流加载
来源:互联网 发布:淘宝店最好的流量获取 编辑:程序博客网 时间:2024/06/06 20:34
layui-流加载
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>流加载</title> <link rel="stylesheet" href="layui/css/layui.css" media="all"> <link rel="stylesheet" href="css/global.css" /><style>.flow-default{width: 600px; height: 400px; overflow: auto; font-size: 0;}.flow-default li{display: inline-block; margin: 0 5px; font-size: 14px; width: 48%; margin-bottom: 10px; height: 100px; line-height: 100px; text-align: center; background-color: #eee;}.flow-default img{width: 100%; height: 100%;}.site-demo-flow{width: 600px; height: 300px; overflow: auto; text-align: center;}.site-demo-flow img{width: 40%; height: 200px; margin: 0 2px 5px 0; border: none;}</style> </head> <body> <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;"> <legend>信息流 - 滚动加载</legend> </fieldset> <ul class="flow-default" id="LAY_demo1"> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> <li>7</li> <li>8</li> </ul> <fieldset class="layui-elem-field layui-field-title" style="margin-top: 50px;"> <legend>信息流 - 手工加载</legend> </fieldset> <ul class="flow-default" style="height: 300px;" id="LAY_demo2"> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> </ul> <fieldset class="layui-elem-field layui-field-title" style="margin-top: 50px;"> <legend>图片懒加载</legend> </fieldset> <div class="site-demo-flow" id="LAY_demo3"> <img lay-src="https://gw.alicdn.com/bao/uploaded/i2/701696736/TB2PNl5ahQa61Bjy0FhXXaalFXa_!!701696736.jpg_400x400q90.jpg?t=1494291277528"> <img lay-src="https://gw.alicdn.com/bao/uploaded/i2/162734861/TB2V5rsX_gc61BjSZFkXXcTkFXa_!!162734861.jpg_400x400q90.jpg?t=1494291277528"> <img lay-src="https://gw.alicdn.com/bao/uploaded/i4/69476562/TB2htq4XTka61BjSszfXXXN8pXa_!!69476562.jpg_400x400q90.jpg?t=1494291277528"> <img lay-src="https://gw.alicdn.com/bao/uploaded/i1/180558071/TB2sy6jXMQc61BjSZFGXXa1DFXa_!!180558071.jpg_400x400q90.jpg?t=1494291277528"> <img lay-src="https://gw.alicdn.com/bao/uploaded/i2/701696736/TB2PNl5ahQa61Bjy0FhXXaalFXa_!!701696736.jpg_400x400q90.jpg?t=1494291277528"> <img lay-src="https://gw.alicdn.com/bao/uploaded/i3/285892163/TB2qu2HX9Zb61BjSZPfXXaU.pXa_!!285892163.jpg_400x400q90.jpg?t=1494291277528"> <img lay-src="https://gw.alicdn.com/bao/uploaded/i2/704998060/TB2S.gAXTgc61BjSZFkXXcTkFXa_!!704998060.jpg_400x400q90.jpg?t=1494291277528"> <img lay-src="https://gw.alicdn.com/bao/uploaded/i3/117202952/TB25lckX_AX61Bjy0FcXXaSlFXa_!!117202952.jpg_400x400q90.jpg?t=1494291277528"> <img lay-src="https://gw.alicdn.com/bao/uploaded/i2/162734861/TB2qijoX9Zb61BjSZPfXXaU.pXa_!!162734861.jpg_400x400q90.jpg?t=1494291277528"> <img lay-src="https://gw.alicdn.com/bao/uploaded/i3/96216586/TB2S7EfXHMc61BjSZFFXXaDLFXa_!!96216586.jpg_400x400q90.jpg?t=1494291277528"> <img lay-src="https://gw.alicdn.com/bao/uploaded/i8/TB1jSSFNFXXXXcoXFXXYXGcGpXX_M2.SS2_400x400q90.jpg?t=1494291277528"> <img lay-src="https://gw.alicdn.com/bao/uploaded/i2/162734861/TB2ylbsX37c61BjSZFKXXb6hFXa_!!162734861.jpg_400x400q90.jpg?t=1494291277528"> <img lay-src="https://gw.alicdn.com/bao/uploaded/i2/117202952/TB2FdyZajUd61BjSZPcXXc6hXXa_!!117202952.jpg_400x400q90.jpg?t=1494291277528"> <img lay-src="https://gw.alicdn.com/bao/uploaded/i4/777105914/TB2t.qbXZwb61Bjy0FfXXXvlpXa_!!777105914.jpg_400x400q90.jpg?t=1494291277528"> <img lay-src="https://gw.alicdn.com/bao/uploaded/i4/TB1XzupNFXXXXcpXXXXXXXXXXXX_!!0-item_pic.jpg_400x400q90.jpg?t=1494291277528"> </div> <p style="margin-top: 20px;"> 无论滚动条上滑还是下滑,都只始终加载当前屏的图片(你可以快速拉动滚动条到中间区域,然后再往上滑动试试) <br>Layui的图片懒加载,除了对滚动条的性能进行了美好的优化,也对图片的“当前屏”进行了高效计算,无惧于任何规模庞大的图片数量! </p> <script src="layui/layui.js" charset="utf-8"></script> <script> layui.use('flow', function(){ var flow = layui.flow; flow.load({ elem: '#LAY_demo1' //流加载容器 ,scrollElem: '#LAY_demo1' //滚动条所在元素,一般不用填,此处只是演示需要。 ,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为Ajax返回的总页数,只有当前页小于总页数的情况下,才会继续出现加载更多 next(lis.join(''), page < 10); //假设总页数为 10 }, 500); } }); flow.load({ elem: '#LAY_demo2' //流加载容器 ,scrollElem: '#LAY_demo2' //滚动条所在元素,一般不用填,此处只是演示需要。 ,isAuto: false ,isLazyimg: true ,done: function(page, next){ //加载下一页 //模拟插入 setTimeout(function(){ var lis = []; for(var i = 0; i < 6; i++){ lis.push('<li><img lay-src="http://s17.mogucdn.com/p2/161011/upload_279h87jbc9l0hkl54djjjh42dc7i1_800x480.jpg?v='+ ( (page-1)*6 + i + 1 ) +'"></li>') } next(lis.join(''), page < 6); //假设总页数为 6 }, 500); } }); //按屏加载图片 flow.lazyimg({ elem: '#LAY_demo3 img' ,scrollElem: '#LAY_demo3' //一般不用设置,此处只是演示需要。 }); }); </script> </body></html>
官网流加载
阅读全文
0 1
- layui流加载实例
- layui-流加载
- layui实现table加载
- jfinal结合layui完成页面的流加载
- layui页面加载简单模式
- layui
- [layui
- layui
- LayUi
- layui源码详细分析系列之模块加载机制
- layui源码详细分析系列之流加载模块
- layUI rable 初始化加载数据、数据刷新表格、传参数
- LayUI富文本编辑器的使用--数据加载与编辑器创建的先后顺序
- layer-layui
- layui学习
- layui-登陆
- layui-MainDemo
- layui-分页
- 分布式开放消息系统(RocketMQ)的原理与实践
- ArcGIS删除地图投影坐标,只保留地理坐标
- Being a Good Boy in Spring Festival (nim game 尼姆博弈)
- 服务主机:本地系统占用内存高
- 纪念昨天见到多年来一直喜欢女生
- layui-流加载
- JavaScript中的[]和{}
- bookmarks_2017_5_19
- 菜鸟程序员成长史 --记 Github 1000+ contributions
- Java程序员的五个职业发展方向
- linux exercise19
- js清空数组
- 解决使用eclipse生成doc时的中文乱码问题
- 汽水瓶