最近ブログに書いたのですが、プロジェクトリストの中に写真がたくさんあり、最初は読み込みが遅いので、スペースを取るために 効果原理分析
イベントの写真画像には、 コンポーネントコード「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 をインストールする最も簡単な方法
WEB アプリケーションのページでは、テーブルがよく使用されます。列の数が限られているため、各列のコ...
Linux コンピュータには 2 つの時間があります。1 つはハードウェア時間 (BIOS に記録さ...
【序文】最近、ITOO の試験システムのストレステストを行いたいので、自分のコンピュータに Lin...
LEMP(Linux + Nginx + MySQL + PHP)は、基本的に今日のWeb開発者にと...
スプライト:以前は、各画像リソースは独立した画像でした。ブラウザが Web サイト内のさまざまな W...
一般的に、マウスは上向きの斜め矢印として表示され、テキストの上に移動すると垂直線になり、ハイパーリン...
CocosCreatorがスキルCD効果を実現多くのゲームにはスキルがあります。プレイヤーがスキルボ...
ほとんどの人は、サーバーサイド レンダリング (SSR と呼んでいます) の概念について聞いたことが...
前回の記事「1行のCSSコードの魅力」では、たった1行のCSSコードで生成できる美しい(奇妙な感じと...
Element UIのtextarea input自動サイズに設定すると、テキストボックスのデフォル...
シナリオ最近の要件は、モバイル デバイス用の h5 ページです。これには、選択可能なカードの行が必要...
1. Tomcatのインストールパスを作成する mkdir /usr/local/tomcat 2....
序文通知バー コンポーネントは、比較的一般的なコンポーネントです。基本的に、すべてのサイトにこのよう...
カーソル選択クエリによって返される行のセットは、結果セットと呼ばれます。結果セット内の行は、入力した...
以下のように表示されます。 //managefee_managefee テーブルの年と月を照会し、c...