<del id="kmqwi"><b id="kmqwi"></b></del>
      <track id="kmqwi"><del id="kmqwi"></del></track>
    1. <table id="kmqwi"></table>
      <acronym id="kmqwi"><strong id="kmqwi"></strong></acronym>
    2. 
      
      <p id="kmqwi"><strong id="kmqwi"></strong></p>
    3. 流加載文檔 - 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('
    4. '+ item.title +'
    5. '); }); //執行下一頁渲染,第二參數為:滿足“加載更多”的條件,即后面仍有分頁 //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 - 用心與你溝通

      亚洲图色