React에서 이미지가 로드된 후 작업을 수행하는 방법: onLoad 이벤트 또는 전체 속성 사용
- Mary-Kate Olsen원래의
- 2024-11-15 10:03:02480검색
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>
);
}
배너가 DOM에 있고 마운트 해제되지 않지만 지속적으로 변경되는 소품으로 구성 요소에 전달되는 img URL이 있는 경우에는 어떻게 되나요?
계속됩니다...
위 내용은 React에서 이미지가 로드된 후 작업을 수행하는 방법: onLoad 이벤트 또는 전체 속성 사용의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.