Search code examples
cssreactjsgatsbysharp

Is there a way to apply CSS styling to lazy-loaded images before they fully load with Gatsby and Sharp?

I use Sharp to lazy-load images on my Gatsby site. At the moment, the images start blurry and "gain focus" when they get on-screen.

I'd like to apply CSS stylings or filters on these images while they are still in "blurry mode", and remove it once they've fully loaded. But so far I don't see any changes in classes before or after they load.

Is there a way for the images to have a class when the whole page loads, and lose that class when the image itself fully loads ? Or alternatively, is there a way to apply an initial styling and then remove it upon fully loading ?

Thank you !

Solution

  • Yes there is. You can pass a placeholderClassName & placeholderStyle props to gatsby-image like this:

    <Img 
    placeholderClassName="myPlaceHolderClassName"
    placeholderStyle={{transform: `rotate(90deg)`}}
    fluid={edge.node.fluid}
/>