jscottsmith / react-scroll-parallax

🔮 React hooks and components to create parallax scroll effects for banners, images or any other DOM elements.

Home Page:https://react-scroll-parallax.damnthat.tv/

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

onLoad function does not fire on image layers

lexwebb opened this issue · comments

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

@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.

Screenshot 2023-11-04 at 10 14 27 PM

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.