本篇內容主要講解“微信小程序中image圖片加載完成監聽的方法”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實用性強。下面就讓小編來帶大家學習“微信小程序中image圖片加載完成監聽的方法”吧!

成都創新互聯公司是一家專注于成都網站建設、成都網站設計與策劃設計,古丈網站建設哪家好?成都創新互聯公司做網站,專注于網站建設10多年,網設計領域的專業建站公司;建站業務涵蓋:古丈等地區。古丈做網站價格咨詢:18982081108

需求

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

實現

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'/>

到此，相信大家對“微信小程序中image圖片加載完成監聽的方法”有了更深的了解，不妨來實際操作一番吧！這里是創新互聯建站，更多相關內容可以進入相關頻道進行查詢，關注我們，繼續學習！

分享標題：微信小程序中image圖片加載完成監聽的方法-創新互聯
鏈接分享：http://www.yijiale78.com/article28/jjocp.html

成都網站建設公司_創新互聯，為您提供定制開發、網站策劃、網站收錄、微信公眾號、域名注冊、軟件開發

廣告

聲明：本網站發布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創新互聯