next.js에서 img onload가 가끔 실행이 안됩니다ㅠ

Question

next.js에서 HTML img element의 onload가 가끔 실행이 안되는데 이유를 아시는 분 계신가요? img의 onload에 isLoading 값을 바꿔주는 콜백 함수를 넣었는데, 가끔 실행이 안되어서 무한 로딩 화면이 보여지더라구요. 간략하게나마 코드 첨부해봅니다. 도와주세요 선생님들 ㅠㅠ import { useState } from react; export default function Home() { const [isLoading, setIsLoading] = useState(true); const hello = () => { console.log(loaded) // 왜 안되지... // setIsLoading(false) } return (

{isLoading &&

Loading...

} hello()} src=이미지 url />

); }

손정현 · Answer

안녕하세요!
Next.js를 사용하신다면 Next.js의 Image 컴포넌트를 사용하는걸 추천드립니다. 각종 최적화 기법들이 적용된 것으로 알고 있습니다.

img.onload는 경우에 따라 실행되지 않을 수 있다고 합니다. ex) 브라우저 캐시에 이미지가 남아있을 경우, onload를 수행하지 않고 바로 렌더가 되어버린다고 합니다.

- https://nextjs.org/docs/api-reference/next/image
- https://stackoverflow.com/questions/12354865/image-onload-event-and-browser-cache
- https://stackoverflow.com/questions/67969732/onload-doesnt-fire-on-cached-images
- https://stackoverflow.com/questions/59787642/nextjs-images-loaded-from-cache-dont-trigger-the-onload-event