미니 프로그램은 이미지 블러 사전 로딩을 구현합니다.

소개

제가 최근 작업하고 있는 미니 프로그램 프로젝트는 많은 수의 사진을 표시하도록 설계되었습니다. 하지만 사진 자체가 상대적으로 크고 용량이 많기 때문에 미니 프로그램에서는 사진의 레이지 로딩 기능을 제공했습니다. 표시할 많은 사진, 하나의 사진과 비교하는 방법 언로드된 프로세스를 친근하게 표시하는 것은 해결해야 할 문제입니다.

Idea

미니 프로그램에서는 Image js 객체를 제공하지 않기 때문에, 미니 프로그램에서 preloading은 new Image()를 사용해 이미지 객체를 생성하는 방식으로는 네이티브 js처럼 직접 생성할 수 없습니다. 뷰 레이어 Picture, 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>
		);
	}

위는 메인 뷰 레이어와 로직 레이어 코드인데, 그 중 이미지 크롭핑, 즉 썸네일 생성을 처리하는 압축이미지 함수를 사용하고, (ps: 우리는 nginx를 사용하여 동적 압축, 자르기 및 기타 기능을 구현합니다. 필요한 친구들은 스스로 관련 튜토리얼을 검색할 수 있습니다~)

주요 로직 처리가 완료된 후, 블러 스타일 처리를 살펴보겠습니다. CSS 메서드인 Blur()를 소개합니다.

blur() CSS 메서드는 출력 이미지에 가우시안 블러를 적용합니다. 하나의 매개변수만 받습니다. Blur 방식은 ios에서 제대로 표시되지 않는 문제가 있다는 점을 언급했습니다. 관련 기사를 쿼리한 결과 ios에는 다시 그리기가 부족하기 때문에, 즉 ios에서는 이 코드를 기반으로 페이지를 다시 그리지 않으므로 표시할 수 없기 때문이라는 것을 알았습니다. 이 문제를 해결하려면 의미 없는 변환을 추가하여 강제로 다시 그리기를 실행하세요~~

추천 튜토리얼: "WeChat Mini Program

위 내용은 미니 프로그램은 이미지 블러 사전 로딩을 구현합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!