微信小程序image圖片加載完成監(jiān)聽(tīng)
需求
在應(yīng)用中顯示的圖片很多情況不滿足業(yè)務(wù)需求，我們需要?jiǎng)討B(tài)根據(jù)圖片的寬高進(jìn)行縮放或加載中顯示的缺省圖片，這是我沒(méi)就需要監(jiān)聽(tīng)圖片加載完成回調(diào)，來(lái)看看微信小程序怎么實(shí)現(xiàn)圖片加載完成回調(diào)。
實(shí)現(xiàn)
1. 綁定回調(diào)
通過(guò)image標(biāo)簽的bindload屬性綁定圖片加載完成回調(diào)函數(shù)，src根據(jù)圖片加載是否完成綁定是否顯示缺省圖：
<image src='{{loadComplete?srcImagePath:defaultImagePath}}' bindload="imageLoad"/>
2. 回調(diào)監(jiān)聽(tīng)
在js文件中定一個(gè)imageLoad函數(shù)，我們就可以通過(guò)參數(shù)拿到圖片加載完成寬高信息：
imgOnLoad(ev) {
let src = ev.currentTarget.dataset.src,
width = ev.detail.width,
height = ev.detail.height
}
3. 縮放圖片
我們寫(xiě)一個(gè)工具類，然后調(diào)用imageUtil方法對(duì)原始圖片根據(jù)屏幕寬高進(jìn)行等比例縮放。
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寬高
通過(guò)imageUtil獲取到目標(biāo)寬高后，this.setData({width:imageUtil(e).width, height:imageUtil(e).height}) 即可以動(dòng)態(tài)修改圖片寬高了(e是imageLoad方法中的參數(shù))：
<image src='{{loadComplete?srcImagePath:defaultImagePath}}' bindload="imageLoad" style='width:width;height:height'/>
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
JS正則表達(dá)式學(xué)習(xí)之貪婪和非貪婪模式實(shí)例總結(jié)
這篇文章主要介紹了JS正則表達(dá)式學(xué)習(xí)之貪婪和非貪婪模式用法,結(jié)合實(shí)例形式總結(jié)分析了JS正則表達(dá)式中貪婪模式與非貪婪模式的具體功能、使用方法與相關(guān)注意事項(xiàng),需要的朋友可以參考下2016-12-12
BootStrap select2 動(dòng)態(tài)改變值的方法
這篇文章主要介紹了BootStrap select2 動(dòng)態(tài)改變值的方法,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下2017-02-02
這篇文章主要介紹了js生成縮略圖后上傳，利用canvas重繪,需要的朋友可以參考下2014-05-05
給一個(gè)存放數(shù)字或字符串的數(shù)組去重很簡(jiǎn)單,那么現(xiàn)在問(wèn)題升級(jí),如何一個(gè)數(shù)組a里面存放的元素是若干個(gè)數(shù)組,那么如何給這個(gè)數(shù)組a去重？本文給大家介紹了JS中給數(shù)組去重的方法小結(jié),需要的朋友可以參考下2024-08-08
NodeJs中的非阻塞方法介紹，需要的朋友可以參考下2012-06-06
這篇文章主要介紹了改變隱藏的input中value值的方法,需要的朋友可以參考下2014-03-03
如何利用ES6進(jìn)行Promise封裝總結(jié)
這篇文章主要介紹了如何利用ES6進(jìn)行Promise封裝總結(jié)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-02-02
javascript實(shí)現(xiàn)日期時(shí)間動(dòng)態(tài)顯示示例代碼
這篇文章主要介紹了javascript實(shí)現(xiàn)日期時(shí)間動(dòng)態(tài)顯示示例代碼，頁(yè)面動(dòng)態(tài)顯示時(shí)間變化的方法有很多，本文為大家介紹下使用javascript的具體實(shí)現(xiàn)，感興趣的朋友可以參考一下2015-09-09
既然說(shuō)到了JavaScript,那么就會(huì)繞不過(guò)去執(zhí)行上下文,只有理解了執(zhí)行上下文才能更好的理解JavaScript本身,不過(guò)本部分不是專門(mén)講解?JavaScript的,主要從JavaScript的執(zhí)行順序開(kāi)始介紹一下JavaScript是怎樣運(yùn)行的2023-09-09
用JS實(shí)現(xiàn)HTML標(biāo)簽替換效果
用JS實(shí)現(xiàn)HTML標(biāo)簽替換效果...2007-06-06