React中img图片加载完成前的loading效果
我在React中有这么一个需求，那就是我希望在图片加载完成前的时候一直显示loading动画效果，等图片加载完成了就实现图片的渲染先讲讲具体的思路，再来说说实际的应用实现思路：// 假设我要加载这三张网页图片var imglist = ['/demo1.png','/demo2.png','/demo3.png']// images 使用用来存储 加载完成的图片的var images = []imglist.forEach(el=>{var image = new Image()image.src = elimage.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 ponent{constructor(props){super(props)this.state = {imglist: [{id: '01',src: '/demo1.png',alt: 'demo1'},{id: '02',src: '/demo2.png',alt: 'demo2'},{id: '03',src: '/demo3.png',alt: 'demo3'}],images: []}}UNSAFE_componentWillMount(){// 在渲染之前进行操作var {imglist } = this.statevar images = []imglist.forEach(el=>{var image = new Image()image.src = el.srcimage.onload = ()=>{images.push(image)this.setState({images})}})}render(){var {imglist, images } = this.stateif(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
这个方法还是比较好用的
