本篇內容主要講解“微信小程序中image圖片加載完成監聽的方法”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實用性強。下面就讓小編來帶大家學習“微信小程序中image圖片加載完成監聽的方法”吧!
需求
在應用中顯示的圖片很多情況不滿足業務需求，我們需要動態根據圖片的寬高進行縮放或加載中顯示的缺省圖片，這是我沒就需要監聽圖片加載完成回調，來看看微信小程序怎么實現圖片加載完成回調。
實現
1. 綁定回調
通過image標簽的屬性綁定圖片加載完成回調函數微信小程序一直加載中，src根據圖片加載是否完成綁定是否顯示缺省圖：
2. 回調監聽
在js文件中定一個函數，我們就可以通過參數拿到圖片加載完成寬高信息：
imgOnLoad(ev)?{
??let?src?=?ev.currentTarget.dataset.src,
???width?=?ev.detail.width,
???height?=?ev.detail.height
?}
3. 縮放圖片
我們寫一個工具類微信小程序一直加載中，然后調用方法對原始圖片根據屏幕寬高進行等比例縮放。
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?
???imageSize.imageHeight?=?windowHeight;
??}
?})
?console.log('縮放后的寬:?'?+?imageSize.imageWidth)
?console.log('縮放后的高:?'?+?imageSize.imageHeight)
?return?imageSize;
}
4. 修改image寬高
通過獲取到目標寬高后，this.({width:(e).width, :(e).}) 即可以動態修改圖片寬高了(e是方法中的參數)：
到此，相信大家對“微信小程序中image圖片加載完成監聽的方法”有了更深的了解，不妨來實際操作一番吧！這里是億速云網站，更多相關內容可以進入相關頻道進行查詢，關注我們，繼續學習！