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

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

最近ブログに書いたのですが、プロジェクトリストの中に写真がたくさんあり、最初は読み込みが遅いので、スペースを取るためにloading画像を使いたいと思いました。同時に、画像の読み込みに失敗した場合は、元のエラーの代わりにエラー画像が表示されるため、見苦しくなります。

効果

ここに画像の説明を挿入

原理分析

これはコンポーネントです。画像を表示するためのコンポーネントです。img タグの URL アドレスを変更するだけです。はい、その通りです。Vue で直接アドレスを変更すると、Vue が応答してデータを更新します。

イベントの写真

画像には、 onloadonerrorなど、多くのイベントがあります。 onload イベントは、読み込みが成功したか失敗したかに関係なく、画像が読み込まれるとすぐに呼び出されます。画像が表示されない場合は、 onerrorメソッドが呼び出されます。これら 2 つの方法を比較すると、最初に onload を使用して画像をロードする必要があり、画像が成功したり失敗したりする可能性があることがわかります。

コンポーネントコード

「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 = {
  読み込み画像: 読み込み画像、
  エラー画像: エラー画像
}

PS: Reactでimg画像が読み込まれる前の読み込み効果を見てみましょう

  • React には、画像が読み込まれる前に読み込みアニメーション効果を表示し、画像が読み込まれた後に画像をレンダリングするという要件があります。
  • まずは具体的なアイデアについて話し、その後に実際の応用について話しましょう
  • 実装のアイデア:
// 次の 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>
			)
		}
	}
}
エクスポートデフォルトホーム

この方法はまだより有用である

上記は、React の画像読み込み、読み込み完了、読み込み失敗の 3 つの段階の実装の原理分析の詳細な内容です。React の画像読み込み完了の詳細については、123WORDPRESS.COM の他の関連記事に注目してください。

以下もご興味があるかもしれません:
  • Reactルートの遅延読み込みのためのいくつかの実装ソリューション
  • FlatList プルダウン リフレッシュ プルアップ ロードに基づく React Native コード例
  • React Native カスタム プルダウン リフレッシュ プルアップ ロード済みリストの例
  • React ネイティブの ListView をプルダウンして更新し、プルアップして実装コードを読み込む
  • React-router 4 オンデマンドロードの実装と原理の詳細な説明
  • React 開発で require.ensure() を使用して ES6 コンポーネントをオンデマンドでロードする方法の詳細な説明

<<:  Linux で rc.local ファイルがない場合の完璧なソリューション

>>:  CentOS 7 で yum を使用して MySQL 5.7.20 をインストールする最も簡単な方法

推薦する

MySql の 4 つのトランザクション分離レベルについて簡単に説明します。

分離レベル:隔離はあなたが考えるよりも複雑です。 SQL 標準では 4 つの分離レベルが定義されてお...

Dockerコンテナのディスクがいっぱいになった場合の状況のまとめ

序文この記事では、最近私が遭遇した 2 つの状況について説明します。今後、新たな発見があれば追加して...

プレフィックスケースを削除する Nginx リバース プロキシ構成のチュートリアル

nginx をリバース プロキシとして使用する場合、リクエストをそのまま次のサービスに転送するだけで...

JVM 上の高性能データ形式ライブラリ パッケージである Apache Arrow の紹介とアーキテクチャ (Gkatziouras)

Apache Arrow は、BigQuery を含むさまざまなビッグデータ ツールで使用される一...

CSS でショートカット プロパティを記述する際は、トラブルの順序に注意してください (落とし穴を避けるため)

ショートハンドプロパティは、複数のプロパティに同時に値を割り当てるために使用されます。たとえば、fo...

DockerはRedis5.0をビルドし、データをマウントします

目次1. 永続データの簡単なマウント2. DockerFileでイメージをビルドし、設定ファイルを指...

検索データ表示を実装するJavaScript

この記事ではJavaScript検索のデータ表示コードを参考までに共有します。具体的な内容は以下のと...

Ubuntu 19 以下に Android Studio をインストールするチュートリアル

過去の経験から言うと、タスクを完了した後にメモを取るのは良い習慣です。インストール環境はUbuntu...

MySQL がテーブルを読み取れないエラー (MySQL 1018 エラー) の解決方法

1. エラーの再現MySQL データベースにはアクセスできますが、データベース テーブルを読み取るこ...

きれいなJavaScriptコードの書き方を教える記事

目次1. 変数意味のある名前を使う不必要なコンテキストを追加しないようにするハードコードされた値を避...

nginx keepaliveの具体的な使い方

http1.1 プロトコルのデフォルトのリクエスト ヘッダーでは、図に示すように、デフォルトで ke...

HTML でマウスが停止したときに行全体の色 (tr) を変更する方法

純粋な CSS を使用して、マウスが行の上を通過するときに行の背景色を変更し、その行にフォーカスがあ...

Reactでコンポーネントを作成する方法

目次序文コンポーネントの紹介クラスコンポーネントの作成状態についてレンダリングについて関数コンポーネ...

MySQLはカバーインデックスを使用してテーブルリターンを回避し、クエリを最適化します。

序文カバーリング インデックスについて説明する前に、まずそのデータ構造である B+ ツリーを理解する...

href をクリックした後にページがジャンプしないようにするための空のリンクの正しい書き方 # 問題

リンクを使用する必要がある場合もありますが、リンクする必要はありません。onclick イベントを処...