onLoad function does not fire on image layers

[lexwebb]

Bug

I'm attempting to create a loading animation for when my images have downloaded to the client. I'm doing this to nicely transition from the low res fallback image to the high res images i'm using for parallax.

Unfortunately the onLoad function that seems to exist in the types for a layer does not ever seem to get called, which means my images never get style updates onLoad.

Here's a codesandbox demonstrating https://codesandbox.io/s/react-scroll-parallax-template-forked-3x9x83?file=/src/App.tsx

[jscottsmith]

@lexwebb Thanks for the Codesandbox.

The reason your onLoad event isn't firing is because the image in ParallaxBanner uses a div with a background image set to cover.

If you need an img element with a load event handler you can see how to set that up in the documentation

Keep in mind you will also need to style the image to work for your use case, probably with object-fit: cover. Hope that helps.