Reactは、読み込み、読み込み完了、読み込み失敗の3つの段階の原則分析を実装します。

「react」から {ImgHTMLAttributes } をインポートします。

/**
 * 画像プレースホルダーコンポーネントのプロパティ*/
エクスポートインターフェースIImagProps<T>はImgHTMLAttributes<T>を拡張します。
  /**
   * 画像を読み込んでいます */
  loadingImg?: 文字列、
  /**
   * 画像の読み込みに失敗しました */
  errorImg?: 文字列、
 /**
  * 画像が通常表示されるアドレス */
  src: 文字列、
}

React をインポートし、{useState} を 'react' から取得します。
// 次の 2 つはデフォルトの画像をインポートしますimport loadImg from './../../../assets/imgs/loading/load.gif';
'./../../../assets/imgs/loading/error.png' から errorImg をインポートします。
デフォルト関数Img(props: IImagProps<any>)をエクスポートします。
  // 画像アドレス const [src, setSrc] = useState(props.loadingImg as string)
  // 初めて読み込むか？これを使用しないと2回読み込まれる const [isFlag, setIsFlag] = useState(false)
  /**
   *画像の読み込みが完了しました*/
  定数handleOnLoad = () => {
    // 初めて読み込むかどうかを判断します。if (isFlag) return;
    // img タグを作成します const imgDom = new Image();
    プロパティを src に追加します。
    // 画像の読み込みが完了したら、通常の画像を使用します imgDom.onload = function () {
      フラグを設定する(true)
      setSrc(プロパティのsrc)
    }
    // 画像の読み込みに失敗しました。画像プレースホルダーを使用します。imgDom.onerror = function () {
      フラグを設定する(true)
      setSrc(props.errorImg を文字列として)
    }
  }
  
  戻る （
    <>
      <画像ソース={src}
        onLoad={handleOnLoad}
        スタイル={{
          高さ: '継承'、
        }}
      </img>
    </>
  ）
}
// 画像の読み込みと失敗した画像のデフォルトのスタイルを設定します Img.defaultProps = {
  読み込み画像: 読み込み画像、
  エラー画像: エラー画像
}

// 次の 3 つの Web 画像をロードするとします 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 = 新しい画像()
	画像.src = el
	image.onload = 関数(){
		// 画像が読み込まれたことを示します。 // 読み込まれた画像を画像に追加します images.push(image)
	}
})

//コンポーネントがレンダリングされるタイミングを判断する if(images.length === 3){
	// これは、3 つの Web ページ画像がすべて読み込まれ、レンダリングできることを意味します。 // 読み込まれた画像をレンダリングします。 }else{
	// これは、Web ページの画像がまだ完全に読み込まれていないため、読み込みアニメーション効果が継続することを意味します。// 読み込みアニメーション効果}

'react' から React をインポートします
import { Carousel, Spin } from 'antd' // antd を使用する
// Homeコンポーネントを作成する class Home extends React.Component{
	コンストラクタ(props){
		スーパー(小道具)
		この状態 = {
			画像リスト: [
				{
					id: '01',
					ソース: 'http://example.com/demo1.png',
					代替: 'デモ1'
				},
				{
					id: '02',
					ソース: 'http://example.com/demo2.png',
					代替: 'デモ2'
				},
				{
					id: '03',
					ソース: 'http://example.com/demo3.png',
					代替: 'demo3'
				}
			]、
			画像: []
		}
	}
	UNSAFE_componentWillMount(){
		// レンダリング前に操作を実行する var { imglist } = this.state
		var 画像 = []
		imglist.forEach(el=>{
			var image = 新しい画像()
			画像.src = el.src
			イメージ.onload = ()=>{
				images.push(画像)
				this.setState({
					画像
				})
			}
		})
	}
	与える（）{
		var { imglist, 画像 } = this.state
		if(images.length === 3){
			// これは、3 つの画像がすべて読み込まれ、レンダリングできることを意味します。 return (
				<div className='共通ボディ'>
					<カルーセル自動再生>
						{imglist.map(el=>(
							<img src={el.src} キー={el.id} alt={el.alt} />
						))}
					</カルーセル>
				</div>
			）
		}それ以外{
			// 画像はまだ完全に読み込まれていないので、この時点で読み込みアニメーション効果が表示されるはずです return (
				<div className='共通読み込み'>
					<Spin tip='読み込み中...' size='large'></Spin>
				</div>
			）
		}
	}
}
エクスポートデフォルトホーム