微信小程式中，由於沒有辦法實現DEMO操作，位置的操作在小程式中很難進行，所以要實現圖片的懶載入是真的難啊（簡直操碎了心~~）！！！

懶載入的實現無非就那幾個辦法，說白了就是按需載入、監聽滾動條載入、延時載入。。。

說明：此方法只適用於有明確統一高度的圖片排列！

不說那麼多了，直接上方法了

首先，我們在本地先放上一張圖片（index.png），然後我們再來看張圖片~~嚶嚶嚶

圖中每個模組的高度應該是Demo的高度=圖片的高度+文字描述內容節點高度+maigin-bottom

知道高度的計算之後就好辦了

微信小程式Page中的onPageScroll方法直接提供了監聽頁面滑動距離的方法（這就很舒服）

page({
    data:{
        damoHeight: '100',//demo高度
    },
    onPageScroll: function (res) {
        console.log(res.scrollTop);
    }
})

由此得到頁面的滾動距離。不過這個方法在WEB開發工具中不是很好用，在用滑鼠滾輪滾動的過程中，這個方法的觸發感覺不是很靈敏，不曉得是不是個別原因。還有，就是如果在這個方法中寫一些精密的判斷話，儘量少寫一點，畢竟頁面滑動的時候，會一直觸發這個方法，難保不會出錯。

知道了demo的高度，頁面的滾動距離之後，剩下的就是資料的渲染了

把後臺返回的圖片地址賦值到一個全域性陣列變數中，並且同時建立一個長度和此陣列一樣的陣列，裡面全放上false，備用

page({
    data:{
        damoHeight: '100',//demo高度
        imgUrls: [//圖片地址
          {
           url: 'http://img02.tooopen.com/images/20150928/tooopen_sy_143912755726.jpg'
          }, {
            url: 'http://img06.tooopen.com/images/20160818/tooopen_sy_175866434296.jpg'
 

          }
        ],
        arry:[false,false],

    },
    onPageScroll: function (res) {
        console.log(res.scrollTop);
    }
})

wxml中這樣寫

<image src="{{arry[index] ? imgUrls[index].url: 'index.png'}}"></image>

用本地的圖片形成一個佔位符效果，然後由arry中對應下標的false和true來控制image 標籤的路徑是本地的還是imgUrls中的，然後在onPageScroll中，用螢幕滑動的距離/Demo的高度，在取整，得到的整數就是arry中需要變成true的下標

page({
    data:{
        damoHeight: '100',//demo高度
        imgUrls: [//圖片地址
          {
           url: 'http://img02.tooopen.com/images/20150928/tooopen_sy_143912755726.jpg'
          }, {
            url: 'http://img06.tooopen.com/images/20160818/tooopen_sy_175866434296.jpg'
          }
        ],
        arry:[false,false],

    },
    onPageScroll: function (res) {
        var _this = this;
        //console.log(res.scrollTop);
        var str = parseInt(res.scrollTop / _this.data.damoHeight);
        _this.data.arry[str] = true;
        _this.setData({
            arry:_this.data.arry
        })
    }
})

搞定，其實也不是什麼很複雜的東西，這就是一種另類一點的實現方式罷了，當然裡面的一些高度的判斷，螢幕的滾動距離還是需要自己去計算滴。。。至於照片的顯示動畫就自己加上去就好，我的話就這樣寫

image{
  opacity: 0;
  width: 100%;
  height: 70%;
  transition: opacity 1s linear 2s;
}
.Action{
    opacity: 1;
}

簡單的淡入淡出，好了，打完收工，不扯淡了，繼續填坑去。。。