React에서 이미지가 로드된 후 작업을 수행하는 방법: onLoad 이벤트 또는 전체 속성 사용-JS 튜토리얼-php.cn

React에서 이미지가 로드된 후 작업을 수행하는 방법: onLoad 이벤트 또는 전체 속성 사용

Mary-Kate Olsen

풀어 주다： 2024-11-15 10:03:02

원래의

547명이 탐색했습니다.

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

HTML 요소에 의해 트리거되는 로드 이벤트는 기본적으로 창 객체까지 버블링되지 않습니다. 따라서 img HTML 요소를 사용하여 이미지를 로드할 때 window 객체에 알려야 하는 경우 이벤트를 수동으로 전달해야 합니다.

예:

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');
});

로그인 후 복사

콘솔 출력: 두 번째 로그 'Window Load Event'는 dispatchEvent를 호출하여 트리거됩니다

Image load event
Window load event
Window load event

로그인 후 복사

React의 이미지 로딩 상태에 따라 텍스트를 업데이트하는 예

예 1: HTML 'complete' 속성 사용

이미지 URL을 가져오는 API 호출을 시뮬레이션하고 이를 배너 구성 요소에 전달하면 imgUrl이 변경될 때 다시 렌더링이 트리거되어 두 번째 렌더링 단계에서 올바른 완료 값을 캡처할 수 있습니다.

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>
    );
}

로그인 후 복사