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 をインストールする最も簡単な方法

推薦する

HTML ページ適応幅テーブル

WEB アプリケーションのページでは、テーブルがよく使用されます。列の数が限られているため、各列のコ...

Ubuntu システムでタイムゾーンと時刻を変更する方法

Linux コンピュータには 2 つの時間があります。1 つはハードウェア時間 (BIOS に記録さ...

xshell を使用して VMware で Linux に接続する方法 (2 つの方法)

【序文】最近、ITOO の試験システムのストレステストを行いたいので、自分のコンピュータに Lin...

Docker を使って LEMP 環境を素早く構築する方法の例

LEMP(Linux + Nginx + MySQL + PHP)は、基本的に今日のWeb開発者にと...

スプライトとフォントアイコンを実装するためのCSS

スプライト:以前は、各画像リソースは独立した画像でした。ブラウザが Web サイト内のさまざまな W...

HTML マウス CSS コントロール

一般的に、マウスは上向きの斜め矢印として表示され、テキストの上に移動すると垂直線になり、ハイパーリン...

CocosCreatorがスキル冷却効果を実装

CocosCreatorがスキルCD効果を実現多くのゲームにはスキルがあります。プレイヤーがスキルボ...

React サーバーサイドレンダリング原則の分析と実践

ほとんどの人は、サーバーサイド レンダリング (SSR と呼んでいます) の概念について聞いたことが...

CSS はこのように使用できますか?気まぐれなグラデーションの芸術

前回の記事「1行のCSSコードの魅力」では、たった1行のCSSコードで生成できる美しい(奇妙な感じと...

Element UI で自動サイズ調整テキストエリアの高さを設定する方法

Element UIのtextarea input自動サイズに設定すると、テキストボックスのデフォル...

CSS で overflow-y: visible; が機能しない理由の分析と解決

シナリオ最近の要件は、モバイル デバイス用の h5 ページです。これには、選択可能なカードの行が必要...

Centos7.X Linux システムに tomcat8 をインストールするためのグラフィック チュートリアル

1. Tomcatのインストールパスを作成する mkdir /usr/local/tomcat 2....

純粋な CSS で実装された 3 つの通知バーのスクロール効果

序文通知バー コンポーネントは、比較的一般的なコンポーネントです。基本的に、すべてのサイトにこのよう...

MySQLでカーソルトリガーを使用する方法

カーソル選択クエリによって返される行のセットは、結果セットと呼ばれます。結果セット内の行は、入力した...

MySQLでconcat関数を使用する方法

以下のように表示されます。 //managefee_managefee テーブルの年と月を照会し、c...