最近ブログに書いたのですが、プロジェクトリストの中に写真がたくさんあり、最初は読み込みが遅いので、スペースを取るために 効果原理分析
イベントの写真画像には、 コンポーネントコード「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画像が読み込まれる前の読み込み効果を見てみましょう
// 次の 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 の他の関連記事に注目してください。 以下もご興味があるかもしれません:
|
<<: Linux で rc.local ファイルがない場合の完璧なソリューション
>>: CentOS 7 で yum を使用して MySQL 5.7.20 をインストールする最も簡単な方法
分離レベル:隔離はあなたが考えるよりも複雑です。 SQL 標準では 4 つの分離レベルが定義されてお...
序文この記事では、最近私が遭遇した 2 つの状況について説明します。今後、新たな発見があれば追加して...
nginx をリバース プロキシとして使用する場合、リクエストをそのまま次のサービスに転送するだけで...
Apache Arrow は、BigQuery を含むさまざまなビッグデータ ツールで使用される一...
ショートハンドプロパティは、複数のプロパティに同時に値を割り当てるために使用されます。たとえば、fo...
目次1. 永続データの簡単なマウント2. DockerFileでイメージをビルドし、設定ファイルを指...
この記事ではJavaScript検索のデータ表示コードを参考までに共有します。具体的な内容は以下のと...
過去の経験から言うと、タスクを完了した後にメモを取るのは良い習慣です。インストール環境はUbuntu...
1. エラーの再現MySQL データベースにはアクセスできますが、データベース テーブルを読み取るこ...
目次1. 変数意味のある名前を使う不必要なコンテキストを追加しないようにするハードコードされた値を避...
http1.1 プロトコルのデフォルトのリクエスト ヘッダーでは、図に示すように、デフォルトで ke...
純粋な CSS を使用して、マウスが行の上を通過するときに行の背景色を変更し、その行にフォーカスがあ...
目次序文コンポーネントの紹介クラスコンポーネントの作成状態についてレンダリングについて関数コンポーネ...
序文カバーリング インデックスについて説明する前に、まずそのデータ構造である B+ ツリーを理解する...
リンクを使用する必要がある場合もありますが、リンクする必要はありません。onclick イベントを処...