需求

    在應用中顯示的圖片很多情況不滿足業務需求，我們需要動態根據圖片的寬高進行縮放或載入中顯示的預設圖片，這是我沒就需要監聽圖片載入完成回撥，來看看微信小程式怎麼實現圖片載入完成回撥。

實現

  1. 繫結回撥

    通過image標籤的bindload屬性繫結圖片載入完成回撥函式，src根據圖片載入是否完成繫結是否顯示預設圖：

<image src='{{loadComplete?srcImagePath:defaultImagePath}}' bindload="imageLoad"/>

2. 回撥監聽

    在js檔案中定一個imageLoad函式，我們就可以通過引數拿到圖片載入完成寬高資訊：

  imgOnLoad(ev) {
    let src = ev.currentTarget.dataset.src,
      width = ev.detail.width,
      height = ev.detail.height
  }

3. 縮放圖片

  我們寫一個工具類，然後呼叫imageUtil方法對原始圖片根據螢幕寬高進行等比例縮放。

function imageUtil(e) {
  var imageSize = {};
  var originalWidth = e.detail.width;//圖片原始寬 
  var originalHeight = e.detail.height;//圖片原始高 
  var originalScale = originalHeight / originalWidth;//圖片高寬比 
  console.log('originalWidth: ' + originalWidth)
  console.log('originalHeight: ' + originalHeight)
  imageSize.imageWidth = originalWidth;
  imageSize.imageHeight = originalHeight;
  //獲取螢幕寬高 
  wx.getSystemInfo({
    success: function (res) {
      var windowWidth = res.windowWidth;
      var windowHeight = res.windowHeight;
      var windowscale = windowHeight / windowWidth;//螢幕高寬比 
      if (originalScale < windowscale) {//圖片高寬比小於螢幕高寬比 
        //圖片縮放後的寬為螢幕寬 
        imageSize.imageWidth = windowWidth;
        imageSize.imageHeight = (windowWidth * originalHeight) / originalWidth;
      } else {//圖片高寬比大於螢幕高寬比 
        //圖片縮放後的高為螢幕高 
        imageSize.imageHeight = windowHeight;
        imageSize.imageWidth = (windowHeight * originalWidth) / originalHeight;
      }
      imageSize.imageWidth = windowWidth;
      imageSize.imageHeight = windowHeight;
    }
  })
  console.log('縮放後的寬: ' + imageSize.imageWidth)
  console.log('縮放後的高: ' + imageSize.imageHeight)
  return imageSize;
}
 

4. 修改image寬高

通過imageUtil獲取到目標寬高後，this.setData({width:imageUtil(e).width, height:imageUtil(e).height}) 即可以動態修改圖片寬高了(e是imageLoad方法中的引數)：

<image src='{{loadComplete?srcImagePath:defaultImagePath}}' bindload="imageLoad" style='width:width;height:height'/>