React中img图片加载完成前的loading效果

React中img图片加载完成前的loading效果

• 我在React中有这么一个需求，那就是我希望在图片加载完成前的时候一直显示loading动画效果，等图片加载完成了就实现图片的渲染
• 先讲讲具体的思路，再来说说实际的应用
• 实现思路：

// 假设我要加载这三张网页图片
var imglist = ['http://example.com/demo1.png','http://example.com/demo2.png','http://example.com/demo3.png']
// images 使用用来存储 加载完成的图片的
var images = []
imglist.forEach(el=>{
	var image = new Image()
	image.src = el
	image.onload = function(){
		// 说明图片image加载完成了
		// 将加载完成的image添加到images中
		images.push(image)
	}
})

// 在组件渲染的时候进行判断
if(images.length === 3){
	// 说明此时三张网页图片已经全部加载完成了，可以进行渲染了
	// 渲染加载完成的图片
}else{
	// 说明此时网页图片还没有全部加载完成，这时候接着loadding动画效果
	// loadding动画效果
}

• 具体实现的例子

import React from 'react'
import { Carousel, Spin } from 'antd' // 使用antd
// 创建 Home组件
class Home extends React.Component{
	constructor(props){
		super(props)
		this.state = {
			imglist: [
				{
					id: '01',
					src: 'http://example.com/demo1.png',
					alt: 'demo1'
				},
				{
					id: '02',
					src: 'http://example.com/demo2.png',
					alt: 'demo2'
				},
				{
					id: '03',
					src: 'http://example.com/demo3.png',
					alt: 'demo3'
				}
			],
			images: []
		}
	}
	UNSAFE_componentWillMount(){
		// 在渲染之前进行操作
		var { imglist } = this.state
		var images = []
		imglist.forEach(el=>{
			var image = new Image()
			image.src = el.src
			image.onload = ()=>{
				images.push(image)
				this.setState({
					images
				})
			}
		})
	}
	render(){
		var { imglist, images } = this.state
		if(images.length === 3){
			// 说明三张图片已经全部加载完成，这个时候已经可以渲染图片了
			return (
				<div className='common-body'>
					<Carousel autoplay>
						{imglist.map(el=>(
							<img src={el.src} key={el.id} alt={el.alt} />
						))}
					</Carousel>
				</div>
			)
		}else{
			// 说明图片还没有全部加载完成，这个时候要显示loading动画效果
			return (
				<div className='common-loading'>
					<Spin tip='Loading...' size='large'></Spin>
				</div>
			)
		}
	}
}
export default Home

• 这个方法还是比较好用的