微信小程式開發---使用IntersectionObserver實作懶加載

微信小程式提供了一個很好用的api，IntersectionObserver 對象，監聽目标元素與其祖先或視窗交叉狀态的手段。

其實作原理在于監聽目标元素與參照區域相交（參照區域可以為頁面顯示區域、指定一個元素節點）；

這裡實作懶加載的原理就是如此，監聽需要加載的圖檔，給圖檔數組添加一個showState：false的字段，當使用IntersectionObserver 監聽到圖檔進入參照區域時，動态改變showState為true。

下面為代碼：

wxml:

<view class="image-container">
  <image wx:for="{{imageList}}" id="image_{{item.id}}" mode="widthFix" class="{{item.showState?'active':''}}" src="{{item.showState? item.src: ''}}" data-index="{{index}}"></image>
</view>
           

active為一個opacity:0到opacity:1的動畫。

js部分：

//index.js
//擷取應用執行個體
const app = getApp()

Page({
  data: {
    imageList: [
      { id: 1, src: "../../images/label_bookcase_01.png",showState: false },
      { id: 2, src: "../../images/label_bookshelf_01.png", showState: false },
      { id: 3, src: "../../images/label_classification_01.png", showState: false },
      { id: 4, src: "../../images/label_home_01.png", showState: false },
      { id: 5, src: "../../images/label_my_01.png", showState: false },
      { id: 6, src: "../../images/no_cover.png", showState: false },
    ]
  },
  onLoad: function(){
    this.setViewportListener();
    
  },
  setViewportListener: function(){
    let that = this;
    for(let i = 0;i<that.data.imageList.length;i++){
      const viewPort = wx.createIntersectionObserver().relativeToViewport();
      viewPort.observe(`#image_${i}`, (res) => {
        //console.log("圖檔進入視圖區域", res);
        let index = res.dataset.index;
        let keyStr = `imageList[${index}].showState`;
        that.setData({
          [keyStr]: true
        })
        viewPort.disconnect();
      })
    }
  }
})