ミニプログラムは画像ブラーのプリロードを実装します

はじめに

私が最近取り組んでいるミニプログラムプロジェクトは、大量の画像を表示するように設計されており、画像の遅延読み込み機能を提供しています。しかし、画像自体のサイズが比較的大きいため、Webサイトに表示する画像が多くなり、読み込み途中の処理をいかにわかりやすく表示するかが課題となっています。

アイデア

ミニ プログラムは Image js オブジェクトを提供しないため、ミニ プログラムのプリロードをネイティブ JS のように直接使用することはできません。 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=&#39;image--not-loaded&#39;
					style={Object.assign({ display: loaded ? &#39;none&#39; : &#39;auto&#39; }, style)}
					lazyLoad
					mode=&#39;aspectFill&#39;
					onLoad={this.toggleThumbLoaded.bind(this)}
					src={compressImage(imgU, &#39;10x&#39; + parseInt(imgH * 10 / imgW))}
				/>
				{thumbLoaded && (
					<Image
						style={Object.assign({ display: loaded ? &#39;auto&#39; : &#39;none&#39; }, style)}
						lazyLoad
						className=&#39;image--is-loaded&#39;
						mode=&#39;aspectFill&#39;
						src={imgU}
						onLoad={this.toggleOriginLoaded.bind(this)}
					/>
				)}
			</Block>
		);
	}

上記はメインのビュー層とロジック層のコードで、画像処理に compressImage 関数が使用されています。トリミング、つまりサムネイルの生成です (追記: 動的圧縮、トリミング、その他の機能を実装するために nginx を使用しています。必要な友達は自分で関連チュートリアルを検索できます~)

メインの論理処理が完了した後、完成したので、ファジースタイルの処理を見てみましょう。CSSメソッドblur()の導入についてです。

blur() CSS メソッドは、出力画像にガウスぼかしを適用します。受け入れられるパラメータは 1 つだけです 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);
  }
}

ブラーメソッドはiOSでは正しく表示されないことに注意してください。関連記事を調べた結果、iOSに再描画がないことが原因であることがわかりました。つまり、iOSでは再描画されません。ページはこのコードに基づいているため、正しく表示できません。この問題を解決したい場合は、意味のない変換をページに追加し、強制的に再描画をトリガーするだけです~~

推奨チュートリアル: " WeChat ミニ プログラム>>

以上がミニプログラムは画像ブラーのプリロードを実装しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。