absent-sapphire

Img onLoad not firing on initial page load when ssr: true

I render a simple image on a route:

<img
    src="/assets/images/villa/villa.webp"
    height="200px"
    width="200px"
    onLoad={() => console.log("Image loaded")}
/>

<img
    src="/assets/images/villa/villa.webp"
    height="200px"
    width="200px"
    onLoad={() => console.log("Image loaded")}
/>

When setting ssr: true, the onLoad event doesn't fire, only on further navigation. When setting ssr: false, the onLoad event fires correctly. Is it a bug or the expected behavior? How can I get the onLoad event to fire on SSR?

3 Replies

ambitious-aqua•4w ago

Event Handlers like the onLoad should not fire in SSR i believe

absent-sapphireOP•4w ago

Is it because onLoad events are attached by React during hydration, and an image may have already loaded during that timeframe? So I should leverage complete props to detect if it has loaded in a useEffect

correct-apricot•4w ago

exactly, i just use a layout effect in the image component to check the reference to see if it has loaded

Gaming

Programming

Img onLoad not firing on initial page load when ssr: true

Did you find this page helpful?