Le mini programme implémente le préchargement du flou d'image

Introduction

Le projet de mini programme sur lequel je travaille récemment est conçu pour afficher un grand nombre d'images. Le mini programme fournit déjà la fonction de chargement paresseux des images, mais comme les images elles-mêmes sont relativement grandes, il y a beaucoup d'images à afficher, donc comment afficher le processus de chargement inachevé de manière conviviale est un problème qui doit être résolu.

Idée

Étant donné que le mini programme ne fournit pas l'objet Image js, le préchargement dans le mini programme ne peut pas être implémenté directement comme le js natif, en utilisant la nouvelle Image () crée un objet image. Il ne peut créer des images que dans la couche de vue et écouter la fin du chargement de l'image via l'événement onLoad.

L'idée de mettre en œuvre le chargement du flou d'image est de charger d'abord une vignette de l'image cible. Le chargement de la vignette est généralement très rapide et peut être ignoré. Une fois la vignette chargée, elle sera affichée. sous forme de flou gaussien. En même temps, l'image originale sera chargée. Une fois l'image originale chargée, elle remplacera la vignette originale. L'image originale et la vignette doivent avoir la même largeur et la même hauteur. Après avoir clarifié l'idée, commencez à coder ~

Étant donné que le projet utilise le framework Taro, la méthode d'écriture de code suivante est la méthode d'écriture React Native ou d'autres frameworks peuvent également être utilisés comme référence. beaucoup de différence. Idées C'est pareil.

imgLoader.js (ce qui suit fait partie du code)

       // 监听原图加载完成
	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>
		);
	}

Ce qui précède est la couche de vue principale et le code de la couche logique, dans lesquels la fonction compressImage est utilisée pour traiter l'image le recadrage, c'est-à-dire la génération de vignettes. (ps : nous utilisons nginx pour implémenter la compression dynamique, le recadrage et d'autres fonctions. Les amis dans le besoin peuvent rechercher eux-mêmes des tutoriels pertinents ~)

Après le traitement logique principal. terminé, regardons le traitement des styles flous. Il s'agit d'introduire une méthode CSS floue(). La méthode CSS

blur() applique le flou gaussien à l'image de sortie. Il n'accepte qu'un seul paramètre flou(radius)

radius 表示模糊的半径，值为length。 它定义了高斯函数的标准偏差值，即屏幕上有多少像素相互融合; 因此，较大的值会产生
更多模糊。值为0会使输入保持不变。 该值为空则为0。（来自MDN）它可以生成类似毛玻璃样式的图片，如下图：

Après avoir compris cette méthode, amusons-nous (écrire du code) ~ On peut donner cet effet Ajouter une petite animation pour faire ça a l'air plus intéressant ~

.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);
  }
}

Il convient de noter que la méthode de flou ne s'affichera pas correctement sur iOS. Après avoir interrogé les articles connexes, j'ai découvert que c'était parce qu'iOS ne redessinait pas. la page basée sur ce code et ne peut donc pas l'afficher correctement. Si vous souhaitez résoudre ce problème, ajoutez-y simplement une transformation dénuée de sens et forcez le déclenchement du redessin ~~

Tutoriel recommandé : " Mini-programme WeChat》

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!