Das Miniprogramm implementiert das Vorladen von Bildunschärfe

Einführung

---

Das Miniprogrammprojekt, an dem ich gerade arbeite, ist darauf ausgelegt, eine große Anzahl von Bildern anzuzeigen. Das Miniprogramm bietet bereits die Lazy-Loading-Funktion von Bildern. Da die Bilder selbst jedoch relativ groß sind, müssen viele Bilder auf der Website angezeigt werden. Wie der unvollendete Ladevorgang benutzerfreundlich angezeigt werden kann, ist ein Problem, das gelöst werden muss.

Idee

---

Da das Miniprogramm das Image-JS-Objekt nicht bereitstellt, kann das Vorladen im Miniprogramm nicht direkt wie natives JS mit neuem Image implementiert werden () erstellt ein Bildobjekt. Es kann nur Bilder in der Ansichtsebene erstellen und den Abschluss des Bildladens über das onLoad-Ereignis überwachen.

Die Idee bei der Implementierung des Bildunschärfe-Ladens besteht darin, zunächst ein Miniaturbild des Zielbilds zu laden. Das Laden des Miniaturbilds erfolgt im Allgemeinen sehr schnell und kann ignoriert werden. Nachdem das Miniaturbild geladen wurde, wird es angezeigt In Form einer Gaußschen Unschärfe wird gleichzeitig das Originalbild geladen. Das Originalbild und das Miniaturbild müssen die gleiche Breite und Höhe haben. Nachdem Sie die Idee geklärt haben, beginnen Sie mit dem Codieren ~

Da das Projekt das Taro-Framework verwendet, kann die folgende Code-Schreibmethode auch als Referenz verwendet werden: Native oder andere Frameworks großer Unterschied. Ideen Es ist alles das Gleiche.

imgLoader.js (das Folgende ist Teil des Codes)

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

Das Obige ist der Code der Hauptansichtsebene und der Logikebene, in dem die Funktion compressImage zum Verarbeiten von Bildern verwendet wird Zuschneiden, also die Generierung von Miniaturansichten (ps: Wir verwenden Nginx, um dynamische Komprimierung, Zuschneiden und andere Funktionen zu implementieren. Freunde in Not können selbst nach relevanten Tutorials suchen ~)

Nach der Hauptlogikverarbeitung Schauen wir uns nun die Verarbeitung von Fuzzy-Stilen an. Hier geht es um die Einführung einer CSS-Methode „blur()“.

Die CSS-Methode „blur()“ wendet Gaußsche Unschärfe auf das Ausgabebild an. Es akzeptiert nur einen Parameter Unschärfe (Radius)

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

Nachdem wir diese Methode verstanden haben, lassen Sie uns Spaß haben (Code schreiben) ~ Wir können diesem Effekt eine kleine Animation hinzufügen, um ihn zu erstellen Es sieht interessanter aus~

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

Es sollte beachtet werden, dass die Unschärfemethode auf iOS nicht korrekt angezeigt wird. Nach der Abfrage verwandter Artikel habe ich festgestellt, dass dies daran liegt, dass iOS nicht neu gezeichnet werden kann Die Seite basiert auf diesem Code, sodass sie nicht korrekt angezeigt werden kann. Wenn Sie dieses Problem lösen möchten, fügen Sie einfach eine bedeutungslose Transformation hinzu und erzwingen Sie das Auslösen des Neuzeichnens~~

Empfohlenes Tutorial: " WeChat Mini-Programm》

Das obige ist der detaillierte Inhalt vonDas Miniprogramm implementiert das Vorladen von Bildunschärfe. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!