React implements the principle analysis of the three stages of loading, loading, completion, loading failure

import { ImgHTMLAttributes } from "react";

/**
 * Image placeholder component properties*/
export interface IImagProps<T> extends ImgHTMLAttributes<T> {
  /**
   * Loading images */
  loadingImg?: string,
  /**
   * Failed to load the image */
  errorImg?: string,
 /**
  * The address where the picture is normally displayed*/
  src: string,
}

import React, { useState } from 'react'
// The following two are to import the default imagesimport loadImg from './../../../assets/imgs/loading/load.gif';
import errorImg from './../../../assets/imgs/loading/error.png'
export default function Img(props: IImagProps<any>) {
  // Image address const [src, setSrc] = useState(props.loadingImg as string)
  // Is it the first time to load? If you don't use this, it will be loaded twice const [isFlag, setIsFlag] = useState(false)
  /**
   * Image loading completed*/
  const handleOnLoad = () => {
    // Determine if it is the first time to load if (isFlag) return;
    // Create an img tag const imgDom = new Image();
    imgDom.src = props.src;
    // Image loading is complete, use the normal image imgDom.onload = function () {
      setIsFlag(true)
      setSrc(props.src)
    }
    // Image loading failed, use image placeholder imgDom.onerror = function () {
      setIsFlag(true)
      setSrc(props.errorImg as string)
    }
  }
  
  return (
    <>
      <img src={src}
        onLoad={handleOnLoad}
        style={{
          height: 'inherit',
        }}
      ></img>
    </>
  )
}
// Set the default style for loading images and failed images Img.defaultProps = {
  loadingImg: loadImg,
  errorImg: errorImg
}

// Suppose I want to load these three web images var imglist = ['http://example.com/demo1.png','http://example.com/demo2.png','http://example.com/demo3.png']
// images is used to store the loaded images var images = []
imglist.forEach(el=>{
	var image = new Image()
	image.src = el
	image.onload = function(){
		// Indicates that the image has been loaded. // Add the loaded image to images images.push(image)
	}
})

//Judge when the component is rendered if(images.length === 3){
	// This means that all three web page images have been loaded and can be rendered. // Render loaded images. }else{
	// This means that the web page images have not been fully loaded yet, so the loading animation effect will continue. // loading animation effect}

import React from 'react'
import { Carousel, Spin } from 'antd' // use antd
// Create the Home component 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(){
		// Perform operations before rendering 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){
			// This means that all three images have been loaded and can be rendered. return (
				<div className='common-body'>
					<Carousel autoplay>
						{imglist.map(el=>(
							<img src={el.src} key={el.id} alt={el.alt} />
						))}
					</Carousel>
				</div>
			)
		}else{
			// The image has not been fully loaded yet, so the loading animation effect should be displayed at this time return (
				<div className='common-loading'>
					<Spin tip='Loading...' size='large'></Spin>
				</div>
			)
		}
	}
}
export default Home