微信小程序?qū)崿F(xiàn)圖片模糊預(yù)加載功能
導(dǎo)語
成都創(chuàng)新互聯(lián)公司-專業(yè)網(wǎng)站定制、快速模板網(wǎng)站建設(shè)、高性價比應(yīng)城網(wǎng)站開發(fā)、企業(yè)建站全套包干低至880元,成熟完善的模板庫,直接使用。一站式應(yīng)城網(wǎng)站制作公司更省心,省錢,快速模板網(wǎng)站建設(shè)找我們，業(yè)務(wù)覆蓋應(yīng)城地區(qū)。費用合理售后完善，十年實體公司更值得信賴。
小程序是一種不用下載就能使用的應(yīng)用，也是一項門檻非常高的創(chuàng)新，經(jīng)過將近兩年的發(fā)展，已經(jīng)構(gòu)造了新的小程序開發(fā)環(huán)境和開發(fā)者生態(tài)。小程序也是這么多年來中國IT行業(yè)里一個真正能夠影響到普通程序員的創(chuàng)新成果，現(xiàn)在已經(jīng)有超過150萬的開發(fā)者加入到了小程序的開發(fā)，與我們一起共同發(fā)力推動小程序的發(fā)展，小程序應(yīng)用數(shù)量超過了一百萬，覆蓋200多個細(xì)分的行業(yè)，日活用戶達(dá)到兩個億，小程序還在許多城市實現(xiàn)了支持地鐵、公交服務(wù)。小程序發(fā)展帶來更多的就業(yè)機(jī)會，2017年小程序帶動就業(yè)104萬人，社會效應(yīng)不斷提升。
由于小程序沒有提供 Image 這個 js 對象，所以在小程序中實現(xiàn)預(yù)加載不能直接像原生js 一樣，直接使用 new Image()創(chuàng)建一個圖片對象，只能在視圖層創(chuàng)建圖片，通過onLoad事件監(jiān)聽圖片加載完成。
實現(xiàn)圖片模糊加載的思路就是先加載一個目標(biāo)圖片的縮略圖，縮略圖的加載一般非?？炜梢院雎圆挥?，縮略圖加載完成之后以高斯模糊的形式展示，與此同時加載原圖，原圖加載完成后替代原縮略圖，原圖和縮略圖需要設(shè)置相同的寬高。 思路理清楚之后，開始碼代碼吧～
由于項目使用了Taro框架，下面的代碼寫法是React的寫法，原生或者其他框架也可以參考，沒有太大的出入，思路都是一樣的。
imgLoader.js(以下為部分代碼)
// 監(jiān)聽原圖加載完成
toggleOriginLoaded() {
this.setState({
loaded: true
});
}
// 監(jiān)聽縮略圖加載完成
toggleThumbLoaded() {
this.setState({
thumbLoaded: true
});
}
render() {
let { loaded, thumbLoaded } = this.state;
let { imgU, imgW, imgH } = this.props;
// 根據(jù)傳入的寬高設(shè)置縮略圖和原圖的寬高
let style = {
width: imgW + 'rpx',
height: imgH + 'rpx'
}
return (
);
}以上為主要視圖層和邏輯層代碼，其中compressImage函數(shù)是用來處理圖片剪裁也就是縮略圖的生成的，(ps：我們是用nginx實現(xiàn)的動態(tài)壓縮，裁剪等功能，有需要的小伙伴可以自行搜索相關(guān)教程～)
主要邏輯處理完成之后我們再來看模糊樣式的處理，在此就要介紹一個 css 方法 blur（）。
blur() CSS方法將高斯模糊應(yīng)用于輸出圖片。它只有一個接受一個參數(shù)blur(radius)
radius 表示模糊的半徑，值為length。 它定義了高斯函數(shù)的標(biāo)準(zhǔn)偏差值，即屏幕上有多少像素相互融合; 因此，較大的值會產(chǎn)生 更多模糊。值為0會使輸入保持不變。 該值為空則為0。（來自MDN）它可以生成類似毛玻璃樣式的圖片，如下圖：
了解了這個方法之后，就讓我們來愉快的玩耍（寫代碼）吧～ 我們可以給這個效果添加一個小動畫，讓它看起來更有意思哦～
.image--not-loaded{
// fix ios 缺少重繪的問題，添加無意義的transform強(qiáng)制觸發(fā)重繪
transform: scale(1);
filter:blur(30px);
}
.image--is-loaded{
// fix ios 缺少重繪的問題，添加無意義的transform強(qiáng)制觸發(fā)重繪
transform: scale(1);
filter:blur(20px);
animation: sharpen 0.8s both;
}
@keyframes sharpen {
0% {
filter: blur(20px);
}
100% {
filter: blur(0px);
}
}需要注意的是blur方法在ios上會出現(xiàn)無法正確展示的問題，查詢了相關(guān)文章后發(fā)現(xiàn)是因為ios 缺少重繪，就是ios不會根據(jù)這個代碼重新繪制頁面因此不能正確展示，如果要解決這個問題只要給他加上一條沒有意義的transform，強(qiáng)制觸發(fā)重繪就可以了～～
以上就是小程序?qū)崿F(xiàn)圖片模糊預(yù)加載的詳細(xì)內(nèi)容，更多請關(guān)注創(chuàng)新互聯(lián)其它相關(guān)文章！
分享標(biāo)題：微信小程序?qū)崿F(xiàn)圖片模糊預(yù)加載功能
標(biāo)題URL：http://m.jiaotiyi.com/article/pjghoj.html