用戶
 找回密碼
 立即注冊

QQ登錄

只需一步,快速開始

掃一掃,登錄網站

小程序社區 首頁 教程 實戰教程 查看內容

小程序實現圖片模糊預加載--超詳情教程

Rolan 2020-2-20 00:41

導語 最近在做的小程序項目設計大量圖片的展示,小程序已經提供了圖片的懶加載功能,但是由于圖片本身比較大加上要展示的圖片比較多,如何以一個比較友好的方式展示未加載完成的過程就是一個必須解決的問題了。 思路 ...

導語

最近在做的小程序項目設計大量圖片的展示,小程序已經提供了圖片的懶加載功能,但是由于圖片本身比較大加上要展示的圖片比較多,如何以一個比較友好的方式展示未加載完成的過程就是一個必須解決的問題了。

思路

由于小程序沒有提供 Image 這個 js 對象,所以在小程序中實現預加載不能直接像原生js 一樣,直接使用 new Image()創建一個圖片對象,只能在視圖層創建圖片,通過onLoad事件監聽圖片加載完成。

實現圖片模糊加載的思路就是先加載一個目標圖片的縮略圖,縮略圖的加載一般非??炜梢院雎圆挥?,縮略圖加載完成之后以高斯模糊的形式展示,與此同時加載原圖,原圖加載完成后替代原縮略圖,原圖和縮略圖需要設置相同的寬高。 思路理清楚之后,開始碼代碼吧~

由于項目使用了Taro框架,下面的代碼寫法是React的寫法,原生或者其他框架也可以參考,沒有太大的出入,思路都是一樣的。

imgLoader.js(以下為部分代碼)

       // 監聽原圖加載完成
	toggleOriginLoaded() {
		this.setState({
			loaded: true
		});
	}
	// 監聽縮略圖加載完成
	toggleThumbLoaded() {
		this.setState({
			thumbLoaded: true
		});
	}
	
	render() {
		let { loaded, thumbLoaded } = this.state;
		let { imgU, imgW, imgH } = this.props;
		// 根據傳入的寬高設置縮略圖和原圖的寬高
		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函數是用來處理圖片剪裁也就是縮略圖的生成的,(ps:我們是用nginx實現的動態壓縮,裁剪等功能,有需要的小伙伴可以自行搜索相關教程~)

主要邏輯處理完成之后我們再來看模糊樣式的處理,在此就要介紹一個 css 方法 blur()。

blur() CSS方法將高斯模糊應用于輸出圖片。它只有一個接受一個參數blur(radius)

radius 表示模糊的半徑,值為length。 它定義了高斯函數的標準偏差值,即屏幕上有多少像素相互融合; 因此,較大的值會產生更多模糊。 值為0會使輸入保持不變。 該值為空則為0。(來自MDN) 它可以生成類似毛玻璃樣式的圖片,如下圖:

了解了這個方法之后,就讓我們來愉快的玩耍(寫代碼)吧~ 我們可以給這個效果添加一個小動畫,讓它看起來更有意思哦~

.image--not-loaded{
  // fix ios 缺少重繪的問題,添加無意義的transform強制觸發重繪
  transform: scale(1);
  filter:blur(30px);
}
.image--is-loaded{
  // fix ios 缺少重繪的問題,添加無意義的transform強制觸發重繪
  transform: scale(1);
  filter:blur(20px);
  animation: sharpen 0.8s both;
}
@keyframes sharpen {
  0% {
    filter: blur(20px);
  }
  100% {
    filter: blur(0px);
  }
}
復制代碼

需要注意的是blur方法在ios上會出現無法正確展示的問題,查詢了相關文章后發現是因為ios 缺少重繪,就是ios不會根據這個代碼重新繪制頁面因此不能正確展示,如果要解決這個問題只要給他加上一條沒有意義的transform,強制觸發重繪就可以了~~

效果圖如下: 5571f524-1f57-43da-

鮮花
鮮花
雞蛋
雞蛋
分享至 : QQ空間
收藏
原作者: a_little 來自: 掘金
上证指数十年走势图