前言

所謂的流加載實際上是第一種優化手段，通常用于圖片豐富的網站，目的是為了提供更好的用戶體驗。

具體的體現是在頁面初始化時，先加載一小部分內容，當用戶下拉頁面到一定的距離，開始加載另一小部分的內容，直至將所有資源加載呈現，體現的是化整為零的思想，具有較好地用戶體現效果。

自實現流加載以及圖片懶加載功能

流加載功能和圖片懶加載功能是分開實現的，使用原生的JavaScript開發（所有涉及交互效果的案例等都是使用JavaScript來實現，基礎才是王道）現在先說說流加載功能，具體的實現效果圖如下：

上面的是自動帶圖標加載形式的，還有事按鈕形式的加載形式，具體效果圖如下：

下面說說具體的實現思路，實際上就是監聽指定元素的scroll事件，當滾動條滾動時需要做的事情：

1. 判斷是否滾動到底部，判斷條件是(假設elem就是外部容器節點), elem.clientHeight+ elem.scrollTop === elem.scrollHeight（容器可是區域的高度 + 滾動條距離頂部的距離 === 容器的滾動高度）
2. 當到達條件時就創建加載區域的節點并追加到容器中，當加載成功后，首先刪除加載節點，將元素節點都追加到容器中
3. 判斷資源是否完全加載，完全加載就顯示沒有多余的資源

在上面實現思路需要考慮的問題：

• 滾動條向上滾動帶來的重復性問題

我的解決是維持一個狀態數組，記錄任何時刻前一次scroll觸發時的scrollTop，與當前scrollTop比較，只有當前scrollTop大于保存的狀態值，才進行相應的程序處理。

流加載中最主要的是判斷滾動條是否滾動條底部，從而執行程序處理。

圖片懶加載：
所謂的圖片懶加載就是頁面初始化時不加載所有圖片，當用戶滾動到可視區域（就是圖片需要顯示的區域時），加載當前可視區域內的圖片，具體的實現效果如下：

由于上傳圖片有大小限制，可能拉滾動條有點快，不過效果還是可以看到的。
實現的關鍵點：

• 判斷圖片是否在當前可是區域內

實現思路：

• 所有的img標簽的src屬性都是空或沒有src屬性，初始化時顯示當前區域的圖片，判斷的條件（假設圖片節點是image, 容器節點elem）：image.offsetTop < elem.clientHeight
• elem容器節點綁定scroll事件，同時也要處理向上滾動帶來的問題
• 設置需要顯示圖片的可視區域，判斷當前圖片是否在可視區域從而是否需要顯示，代碼如下：

      // record = [0], data是圖片src的數據源
      elem.addEventListener('scroll', function() {
          let scrollTop = this.scrollTop, 
              scrollHeight = this.scrollHeight, 
              clientHeight = elem.clientHeight;
          // 處理向上滾動的重復性問題
          if (scrollTop > record[0]) {
              record.shift();
              record.push(scrollTop);
          }
          // 只有向下滾動才執行相關程序
          if (scrollTop >= record[0]) {
              for (let index = 0; index < images.length; index++) {
                  let image = images[index], 
                      offsetTop = image.offsetTop, 
                      start = scrollTop, 
                      end = start + clientHeight;
                        // 核心代碼，圖片顯示的可視區域: scrollTop ~ scollTop + clientHeight
                      if (offsetTop >= start && offsetTop <= end) {
                            if (!image.src) {
                                setTimeout(function() {
                                    image.src = data[index];
                                }, 300);
                            }
                        }
                    }
                }
            });

代碼主要組織結構圖如下：

下面說說layui中流加載模塊的實現，該內置模塊使用JQuery來實現，對于流加載以及圖片懶加載實現思想，我上面的實現思路跟它的相似，核心代碼還是有所區別，下面主要說說區別點：

• layui內置流加載模塊，考慮到容器元素是全局的情況處理, 作者考慮的很全面
• 內置模塊對外提供api支持用于自實現具體的容器元素
• layui該內置模塊實現在操作的過程中更加流暢自然

該內置模塊代碼組織結構圖如下：

該模塊組織非常簡潔明了，load是用于處理流加載，lazyimg是處理圖片懶加載的。

layui框架內置模塊flow.js的詳細代碼注釋以及我自己實現的demo的源代碼會上傳到我的Github上，與君共進步。

致遠行的你我