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

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

Mary-Kate Olsen

リリース： 2024-11-15 10:03:02

オリジナル

548 人が閲覧しました

How to Perform Actions After an Image Loads in React: Using the onLoad Event or the complete Property

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

例:

HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  </head>
  <body>
    <img>



<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} />
}

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 ref={ref} src={imgUrl}
                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="https://placehold.co/100x100"
                onLoad={() => {
                    console.log("StaticBanner img loaded");
                    setLloaded(true);
                }}
                onError={() => console.log("StaticBanner img error")}/>
            <p>{loaded ? "Image loaded" : "Image is not loaded"}</p>
        </div>
    );
}

ログイン後にコピー