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. 效果圖
總結
