next/image callback when the actual image is fully loaded

[martinezleoml]

Describe the feature you'd like to request

I'd like to trigger a "fade in" animation (using an external animation library such as framer-motion) when the image is fully loaded by next/image.

I planned to use the regular onLoad() callback but this seems to be called twice by the Image component :

• 1st time by the placeholder when image is not visible ;
• 2nd time when the actual image is visible (in the viewport & fully loaded)

Since the event payload is strictly the same, I can't distinguish when the actual image is loaded.

Describe the solution you'd like

It would be nice if a callback function could be fired when the actual image is fully loaded.

Describe alternatives you've considered

I considered to count the onLoad() calls but it sounds like a dirty way of doing things. :)

[martinezleoml]

Not sure if this is the intended behavior, maybe we can consider this as a bug.

[ghost]

Recommendations on what the next.js team considers best practice for testing whether next/image has fully loaded would also be nice for visual regression testing. Making sure that all images have fully loaded before you take a screenshot is quite important there to prevent flake in your tests.

I wouldn't mind counting the onLoad, but it would then be nice to have confirmation from the maintainers that we can expect this to be a stable solution.