您好,登錄后才能下訂單哦!
導(dǎo)語
小程序是一種不用下載就能使用的應(yīng)用,也是一項(xiàng)門檻非常高的創(chuàng)新,經(jīng)過將近兩年的發(fā)展,已經(jīng)構(gòu)造了新的小程序開發(fā)環(huán)境和開發(fā)者生態(tài)。小程序也是這么多年來中國IT行業(yè)里一個(gè)真正能夠影響到普通程序員的創(chuàng)新成果,現(xiàn)在已經(jīng)有超過150萬的開發(fā)者加入到了小程序的開發(fā),與我們一起共同發(fā)力推動(dòng)小程序的發(fā)展,小程序應(yīng)用數(shù)量超過了一百萬,覆蓋200多個(gè)細(xì)分的行業(yè),日活用戶達(dá)到兩個(gè)億,小程序還在許多城市實(shí)現(xiàn)了支持地鐵、公交服務(wù)。小程序發(fā)展帶來更多的就業(yè)機(jī)會(huì),2017年小程序帶動(dòng)就業(yè)104萬人,社會(huì)效應(yīng)不斷提升。
由于小程序沒有提供 Image 這個(gè) js 對象,所以在小程序中實(shí)現(xiàn)預(yù)加載不能直接像原生js 一樣,直接使用 new Image()創(chuàng)建一個(gè)圖片對象,只能在視圖層創(chuàng)建圖片,通過onLoad事件監(jiān)聽圖片加載完成。
實(shí)現(xiàn)圖片模糊加載的思路就是先加載一個(gè)目標(biāo)圖片的縮略圖,縮略圖的加載一般非??炜梢院雎圆挥?jì),縮略圖加載完成之后以高斯模糊的形式展示,與此同時(shí)加載原圖,原圖加載完成后替代原縮略圖,原圖和縮略圖需要設(shè)置相同的寬高。 思路理清楚之后,開始碼代碼吧~
由于項(xiàng)目使用了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 ( <Block> <Image className='image--not-loaded' style={Object.assign({ display: loaded ? 'none' : 'auto' }, style)} lazyLoad mode='aspectFill' onLoad={this.toggleThumbLoaded.bind(this)} src={compressImage(imgU, '10x' + parseInt(imgH * 10 / imgW))} /> {thumbLoaded && ( <Image style={Object.assign({ display: loaded ? 'auto' : 'none' }, style)} lazyLoad className='image--is-loaded' mode='aspectFill' src={imgU} onLoad={this.toggleOriginLoaded.bind(this)} /> )} </Block> ); }
以上為主要視圖層和邏輯層代碼,其中compressImage函數(shù)是用來處理圖片剪裁也就是縮略圖的生成的,(ps:我們是用nginx實(shí)現(xiàn)的動(dòng)態(tài)壓縮,裁剪等功能,有需要的小伙伴可以自行搜索相關(guān)教程~)
主要邏輯處理完成之后我們再來看模糊樣式的處理,在此就要介紹一個(gè) css 方法 blur()。
blur() CSS方法將高斯模糊應(yīng)用于輸出圖片。它只有一個(gè)接受一個(gè)參數(shù)blur(radius)
radius 表示模糊的半徑,值為length。 它定義了高斯函數(shù)的標(biāo)準(zhǔn)偏差值,即屏幕上有多少像素相互融合; 因此,較大的值會(huì)產(chǎn)生 更多模糊。值為0會(huì)使輸入保持不變。 該值為空則為0。(來自MDN)它可以生成類似毛玻璃樣式的圖片,如下圖:
了解了這個(gè)方法之后,就讓我們來愉快的玩耍(寫代碼)吧~ 我們可以給這個(gè)效果添加一個(gè)小動(dòng)畫,讓它看起來更有意思哦~
.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上會(huì)出現(xiàn)無法正確展示的問題,查詢了相關(guān)文章后發(fā)現(xiàn)是因?yàn)閕os 缺少重繪,就是ios不會(huì)根據(jù)這個(gè)代碼重新繪制頁面因此不能正確展示,如果要解決這個(gè)問題只要給他加上一條沒有意義的transform,強(qiáng)制觸發(fā)重繪就可以了~~
以上就是小程序?qū)崿F(xiàn)圖片模糊預(yù)加載的詳細(xì)內(nèi)容,更多請關(guān)注億速云其它相關(guān)文章!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。