生而爲人 誰不付出 誰不努力
本篇文章主要講述了是使用第三方插件layui中是流加載模塊,該模塊包含信息流加載和圖片懶加載兩大核心支持,無論是對服務端、還是前端體驗,都有非常大的性能幫助。你可能已經在太多的地方看到她們的身影了,但不妨現在開始,體驗一下Layui更爲簡單和高效的Flow吧。
使用
flow模塊包含兩個核心方法,如下所示:
codelayui.code
layui.use('flow', function(){
var flow = layui.flow;
//信息流
flow.load(options);
//圖片懶加載
flow.lazyimg(options);
});
下面直接給出我實際寫的demo代碼和效果圖
1:實際的代碼和相對應的jQuery代碼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>layui</title>
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link rel="stylesheet" href="layui/css/layui.css" media="all">
<!-- 注意:如果你直接複製所有代碼到本地,上述css路徑需要改成你本地的 -->
</head>
<body>
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
<legend>信息流 - 滾動加載</legend>
</fieldset>
<p style="margin-top: 20px;">
填充數據 用於顯示滾動條滑動加載數據
</p>
<p style="margin-top: 20px;">
填充數據 用於顯示滾動條滑動加載數據
</p> <p style="margin-top: 20px;">
填充數據 用於顯示滾動條滑動加載數據
</p> <p style="margin-top: 20px;">
填充數據 用於顯示滾動條滑動加載數據
</p> <p style="margin-top: 20px;">
填充數據 用於顯示滾動條滑動加載數據
</p> <p style="margin-top: 20px;">
填充數據 用於顯示滾動條滑動加載數據
</p> <p style="margin-top: 20px;">
填充數據 用於顯示滾動條滑動加載數據
</p> <p style="margin-top: 20px;">
填充數據 用於顯示滾動條滑動加載數據
</p> <p style="margin-top: 20px;">
填充數據 用於顯示滾動條滑動加載數據
</p> <p style="margin-top: 20px;">
填充數據 用於顯示滾動條滑動加載數據
</p> <p style="margin-top: 20px;">
填充數據 用於顯示滾動條滑動加載數據
</p> <p style="margin-top: 20px;">
填充數據 用於顯示滾動條滑動加載數據
</p> <p style="margin-top: 20px;">
填充數據 用於顯示滾動條滑動加載數據
</p>
</p>
<br>
<br>
<ul class="flow-default" id="LAY_demo1"></ul>
<ul class="flow-default" id="LAY_demo2"></ul>
<script src="layui/layui.js" charset="utf-8"></script>
<!-- 注意:如果你直接複製所有代碼到本地,上述js路徑需要改成你本地的 -->
<script>
layui.use('flow', function(){
var flow = layui.flow;
flow.load({
elem: '#LAY_demo1' //流加載容器
,end:'沒有更多數據展示啦' //沒有數據之後的提示語
,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><image src="http://images.xinjuenet.cn//20200215195621.jpg" style="height: 100px;"/></li>')
}
next(lis.join(''), page < 6); //假設總頁數爲 6
}, 500);
}
});
});
</script>
</body>
</html>
2實際 的效果頁面的效果是:首先加載頁面的時候 會自動加載第一頁的數據,
2.1頁面沒有被數據展示出現滾動條:如果展示的數據沒有讓頁面出現了滾動條,可以通過點擊加載更多來請求下一頁的數據。
2.2:頁面被數據展示之後出現滾動條:可以通過滾動到底部來加載下一頁數據。
主要的是用使用到layui中的flow模塊
3上述是一個比較簡單的例子,以下是信息流完整的參數支撐(即options對象),它們將有助於你更靈活地應對各種場景
參數 | 類型 | 描述 |
---|---|---|
elem | string | 指定列表容器的選擇器 |
scrollElem | string | 滾動條所在元素選擇器,默認document。如果你不是通過窗口滾動來觸發流加載,而是頁面中的某一個容器的滾動條,那麼通過該參數指定即可。 |
isAuto | boolean | 是否自動加載。默認true。如果設爲false,點會在列表底部生成一個“加載更多”的button,則只能點擊它纔會加載下一頁數據。 |
end | string | 用於顯示末頁內容,可傳入任意HTML字符。默認爲:沒有更多了 |
isLazyimg | boolean | 是否開啓圖片懶加載。默認false。如果設爲true,則只會對在可視區域的圖片進行按需加載。但與此同時,在拼接列表字符的時候,你不能給列表中的img元素賦值src,必須要用lay-src取代,如:
JavaScript片段layui.code
|
mb | number | 與底部的臨界距離,默認50。即當滾動條與底部產生該距離時,觸發加載。注意:只有在isAuto爲true時有效。 額,等等。。mb=margin-bottom,可不是罵人的呀。 |
done | function | 到達臨界點觸發加載的回調。信息流最重要的一個存在。攜帶兩個參數:
JavaScript片段layui.code
|
圖片懶加載
應該說比當前市面上任何一個懶加載的實現都更爲強勁和輕量,她用不足80行代碼巧妙地提供了一個始終加載當前屏圖片的高性能方案(無論上滑還是下滑)。對你的網站因爲圖片可能帶來的壓力,可做出很好的應對。
codelayui.code
layui.use('flow', function(){
var flow = layui.flow;
//當你執行這樣一個方法時,即對頁面中的全部帶有lay-src的img元素開啓了懶加載(當然你也可以指定相關img)
flow.lazyimg();
});
如上所述,它只會針對以下img元素有效:
HTMLlayui.code
<img lay-src="aaa.jpg">
<img src="bbb.jpg" alt="該圖不會懶加載">
<img lay-src="ccc.jpg">
圖片懶加載的使用極其簡單,其參數(options對象)可支持的key如下表所示:
參數 | 類型 | 描述 |
---|---|---|
elem | string | 指定開啓懶加載的img元素選擇器,如 elem: '.demo img' 或 elem: 'img.load' |
scrollElem | string | 滾動條所在元素選擇器,默認document。如果你不是通過窗口滾動來觸發流加載,而是頁面中的某一個容器的滾動條,那麼通過該參數指定即可。 |
最後的是官方的一些說明文檔和使用方法。 實際的:demo下載地址 我已上傳下載直接運行查看實際的效果哦