最近做的專案，頁面列表頁，大量需要懶載入的效果，這裡做個總結，如有錯的，歡迎交流~

囉嗦前言：

　　我們平時網頁閱讀一個列表頁，常見的翻頁就是在頁底部有個頁面跳轉，其在點選頁碼的時候，實際就是去請求新頁面的列表資料，再載入新頁面。

　　懶載入的本質就是如此，頁面閱讀到底部，直接觸發介面的新請求。
　　與翻頁跳轉的操作不同的是，懶載入，不能隔頁跳轉，頁面保留全部請求結果，替代了翻頁時頁面頭尾部等其他非列表資料的重新載入。

　　這裡可以參考知乎首頁 https://www.zhihu.com/ 的列表頁，也是懶載入效果。

所以，懶載入的實現步驟就是醬紫的~

step1：html我們建一個div用來迴圈列表內容

　　<div class="lazyload"></div>

step2：js填寫模板，把要迴圈的html打個樣

　　var template='<div class="list">模組[(id)[(name)]]</div>';

step3：建立一個數組，用來處理介面返回的資料（如json,字串，陣列等），在資料的key下放我們需要的欄位

　　var data = [];
　　for(var i=0; i<dataJson.length;i++){
　　　　data.push({
　　　　　　id: dataJson[i],

　　　　　　name: dataJson[i].name
　　　　});
　　}
　　var html = render(data);  //步驟4

step4：data鍵值,放到template裡，這裡寫的這個方法，主要是做資料替換，根據key取值　

function render(data){
    var html = '';
    data.forEach(function(item,i){
        var temp = new String(template);
        $.each(item,function(k,v){
            var reg = new RegExp('\\[\\('+k+'\\)\\]','g'); temp = temp.replace(reg, v); }); html += temp; }) return html; } 
 

step5：重點來了，從這裡開始實現懶載入。之前的步驟就已經把一次介面請求的資料都渲染到html上了。

　　現在，我們再新增一個div，對這個div做滾輪監聽，當它出現在頁面時，就去觸發新的介面請求，然後就去再去迴圈一次步驟2,3,4

html：　　　　　　　　　　

　　<div class="loading-more">載入更多</div>

js:

window.onscroll = function() {
    if (isElementInViewport($('.loading-more')[0])) {
           loadData() //請求介面方法，
    }
};

//懶載入滾動監聽
function isElementInViewport(el) {
    offset = 0;
    const box = el.getBoundingClientRect(), top = (box.top >= 0), left = (box.left >= 0), bottom = (box.bottom <= (window.innerHeight || document.documentElement.clientHeight) 　　　　　　　　　　+ offset), right = (box.right <= (window.innerWidth || document.documentElement.clientWidth) 　　　　　　　　　　+ offset); return (top && left && bottom && right); } 

　tips.    $('.loading-more')這裡一定是要取$('.loading-more')[0]這樣式的，原因我也不好不知道QAQ，非常歡迎大神來解惑。

step6：載入的小尾巴
　　剩下就是把介面請求和步驟3封裝在一個方法裡（譬如取個名字叫loadData），當頁面初始化的時候，呼叫一次loadData();，當頁面滾動觸發了步驟5，就再呼叫一次loadData();

　　當然，也可以做成點選觸發的效果，這裡就只需要把步驟5換成點選事件就OK了

最後，為防止頁面無限制持續請求介面載入的情況，還可以給一個保護機制，即滾輪觸發的載入狀態，例如長var lock = false; 這樣的。當頁面在步驟5時，lock = true,才開啟載入，反之不載入

最後囉嗦一句，三元表示式可以良好的解決data在push時，返回同一key下的不同value