流加載文檔 - layui.flow

                    該模塊包含信息流加載圖片懶加載兩大核心支持,無論是對服務端、還是前端體驗,都有非常大的性能幫助。你可能已經在太多的地方看到她們的身影了,但不妨現在開始,體驗一下Layui更為簡單和高效的Flow吧。

                    模塊加載名稱: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('
                  1. '+ item.title +'
                  2. '); }); //執行下一頁渲染,第二參數為:滿足“加載更多”的條件,即后面仍有分頁 //pages為Ajax返回的總頁數,只有當前頁小于總頁數的情況下,才會繼續出現加載更多 next(lis.join(''), page < res.pages); }); } }); });

                    上述是一個比較簡單的例子,以下是信息流完整的參數支撐(即options對象),它們將有助于你更靈活地應對各種場景

                    參數 類型 描述
                    elem string 指定列表容器的選擇器
                    scrollElem string 滾動條所在元素選擇器,默認document。如果你不是通過窗口滾動來觸發流加載,而是頁面中的某一個容器的滾動條,那么通過該參數指定即可。
                    isAuto boolean 是否自動加載。默認true。如果設為false,點會在列表底部生成一個“加載更多”的button,則只能點擊它才會加載下一頁數據。
                    end string 用于顯示末頁內容,可傳入任意HTML字符。默認為:沒有更多了
                    isLazyimg boolean 是否開啟圖片懶加載。默認false。如果設為true,則只會對在可視區域的圖片進行按需加載。但與此同時,在拼接列表字符的時候,你不能給列表中的img元素賦值src,必須要用lay-src取代,如:
                         
                    layui.each(res.data, function(index, item){
                      lis.push('<li><img lay-src="'+ item.src +'"></li>');
                    });   
                                
                    mb number 與底部的臨界距離,默認50。即當滾動條與底部產生該距離時,觸發加載。注意:只有在isAuto為true時有效。
                    額,等等。。mb=margin-bottom,可不是罵人的呀。
                    done function 到達臨界點觸發加載的回調。信息流最重要的一個存在。攜帶兩個參數:
                    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 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。如果你不是通過窗口滾動來觸發流加載,而是頁面中的某一個容器的滾動條,那么通過該參數指定即可。
                    結語

                    如果還有各種流行的流加載,你可以給我們提供建議,我們會在layui后續版本中選擇性加入。

                    layui - 用心與你溝通

                    亚洲图色