next/image lazy loading and fade in animation

[sulram]

Is there a way to get loading information about next/image component, in order to create lazy load animations, like fade in?

[styfle]

Not at this time.

We would like to add a placeholder prop to handle these use cases.

See #18858

[ondrej-langr]

Found something useful!

Just create yourself a custom react element and make use of classic onLoad callback.

Hope its useful!
Cheers.

[QuentinRoy]

Be careful with this solution as it does not always work. For example, onLoad may not be called if the image was cached.

[KingMatrix1989]

Be careful with this solution as it does not always work. For example, onLoad may not be called if the image was cached.

For cached images, you can attach a ref to the image and check for imageRef.current.complete. This works.

[styfle]

There is a new prop, onLoadingComplete(), you can try out on canary.

yarn add next@canary

[karcreativeworks]

Here's a simpler hook for the above. you can change to onLoadingComplete depending on your Next version.

export const useNextImageImageFade = (_className) => {
  const [className, setClassName] = useState(`${_className} opacity-0`);
  return {
    className,
    onLoad: (target) => {
      setClassName(`${_className} opacity-1`);
    },
  };
};

you can use it as

<Image 
	src="/src.jpg"
	layout="fill"
	{...useNextImageImageFade(styles.custom_class)}
/>

and include opacity-0 & opacity-1 class names in your globals.css with respective opacities and a suitable transition for your fit.

[JamesIves]

Here's a simpler hook for the above. you can change to onLoadingComplete depending on your Next version.

export const useNextImageImageFade = (_className) => {
  const [className, setClassName] = useState(`${_className} opacity-0`);
  return {
    className,
    onLoad: (target) => {
      setClassName(`${_className} opacity-1`);
    },
  };
};

you can use it as

<Image 
	src="/src.jpg"
	layout="fill"
	{...useNextImageImageFade(styles.custom_class)}
/>

and include opacity-0 & opacity-1 class names in your globals.css with respective opacities and a suitable transition for your fit.

I needed this for some presentational background images to prevent a jarring page transition, simply using the blur placeholder was not enough. The above works, but some browsers (Chrome iOS I'm looking at you) will not animate this. You'll need to use keyframes instead:

@keyframes opacity {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.opacity-1 {
  animation-name: opacity;
  // pick your poison
  animation-duration: 0.3s;
  animation-iteration-count: 1;
  animation-timing-function: ease-out;
}

.opacity-0 {
  opacity: 0;
}

You'll also want to add a <noscript> tag that allows users with JavaScript disabled to actually see the images, treating the animation as a progressive enhancement. You can add a .animated class to the useState call above, and then add this somewhere in the root of your page so those users aren't left out.

<noscript>
    <style>
       {`
          .animated {
            opacity: 1 !important;
       }
     `}
   </style>
</noscript>

Hope this helps someone!