React で画像が読み込まれた後にアクションを実行する方法: onLoad イベントまたは完全なプロパティを使用する

HTML 要素によってトリガーされるロード イベントは、デフォルトではウィンドウ オブジェクトにバブルアップしません。したがって、img HTML 要素を使用して画像がロードされるときに、ウィンドウ オブジェクトに通知する必要がある場合は、手動でイベントをウィンドウ オブジェクトにディスパッチする必要があります。

例:

HTML

  
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  
  
    <img  src="/static/imghwm/default1.png" data-src="https://placehold.co/100x100" class="lazy" alt="React で画像が読み込まれた後にアクションを実行する方法: onLoad イベントまたは完全なプロパティを使用する" >



<p>JS<br>
</p>

<pre class="brush:php;toolbar:false">document.getElementById('image').addEventListener('load', function() {
  console.log('Image load event');
  window.dispatchEvent(new Event('load'));  // Manually dispatch load event to window
});

window.addEventListener('load', function() {
  console.log('Window load event');
});

コンソール出力: 2 番目のログ「Window Load Event」は、dispatchEvent
を呼び出すことによってトリガーされます。

Image load event
Window load event
Window load event

React での画像の読み込みステータスに基づいてテキストを更新する例

例 1: HTML の「complete」プロパティの使用

画像 URL をフェッチする API 呼び出しをシミュレートし、それを Banner コンポーネントに渡すと、imgUrl が変更されたときに再レンダリングがトリガーされ、2 番目のレンダリング段階で completed の正しい値をキャプチャできるようになります。

import { useRef , useState , useEffect } from "react";

export default function App() {
    const [imgUrl, setImgUrl] = useState("");
    useEffect(() => {
        // simulate calling API to get image url
        const loadImage = () => {
            setTimeout(() => {
                setImgUrl("https://placehold.co/200x100")
          }, 1500);
        }
      loadImage();
    }, []);
    return <banner imgurl="{imgUrl}"></banner>
}

function Banner({ imgUrl }) {
    const ref = useRef(null);
    // this works when the imgUrl changes, triggering a re-render. Otherwise, the value of completed will always be false
   const completed = Boolean(ref.current?.complete);
    return (
        <div>
            <img  src="/static/imghwm/default1.png" data-src="https://placehold.co/100x100" class="lazy" ref="{ref}" onload="{()" alt="React で画像が読み込まれた後にアクションを実行する方法: onLoad イベントまたは完全なプロパティを使用する" > console.log("loaded")}
                onError={() => console.log("error")}/>
            <p>{completed ? "Image loaded" : "Image is not loaded"}</p>
        </div>
    );
}

例 2: onLoad イベントの使用

onLoad イベント コールバックでコンポーネントの状態を更新します

function StaticBanner() {
    const [loaded, setLloaded] = useState(false);
    return (
        <div>
            <img  src="/static/imghwm/default1.png" data-src="https://placehold.co/100x100" class="lazy" onload="{()" alt="React で画像が読み込まれた後にアクションを実行する方法: onLoad イベントまたは完全なプロパティを使用する" > {
                    console.log("StaticBanner img loaded");
                    setLloaded(true);
                }}
                onError={() => console.log("StaticBanner img error")}/>
            <p>{loaded ? "Image loaded" : "Image is not loaded"}</p>
        </div>
    );
}

バナーが DOM 内に存在しアンマウントされないが、コンポーネントに prop として渡される img URL が常に変化する場合はどうなるでしょうか?

続きます...

以上がReact で画像が読み込まれた後にアクションを実行する方法: onLoad イベントまたは完全なプロパティを使用するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。