How to run a function onLoad of an image in NextJS Image component

Question

I want to show a skeleton while my image is loading. I tried to pass an onLoad prop in the new Image component provided by NextJS but the function fires off before the image is loaded.

Here is my code

const [loaded, setLoaded] = useState(false);

<Image
  src={src}
  alt={""}
  className={styles.image_tag}
  onLoad={(e) => setLoaded(true)}
  style={{ opacity: loaded ? "1" : "0" }}
  layout={"fill"}
/>

{!loaded && (
  <Skeleton
    className={styles.skeleton}
    variant={"rect"}
    animation={"wave"}
  />
)}

Image should displayed only when loaded is true. Its displaying always in your code — Rashomon
– Rashomon, Commented Jan 20, 2021 at 16:00
Is there any way that I can optimize images in the <img> tag — angelo
– angelo, Commented Jan 21, 2021 at 4:29

stickyuser · Accepted Answer · 2021-08-14 13:47:50Z

6

As of 11.1 you can use onLoadingComplete

A callback function that is invoked once the image is completely loaded and the placeholder has been removed.

https://nextjs.org/docs/api-reference/next/image#onloadingcomplete

answered Aug 14, 2021 at 13:47

stickyuser

2,93018 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Tom Doodler Over a year ago

For me this fires immediately when emulating slow connection speed

stickyuser Over a year ago

Have you disabled your cache?

Tom Doodler Over a year ago

I refreshed the page using Ctrl + Shift + R, which forces the browser to refresh without caching. To my understanding that should suffice

Dev_Ose · Accepted Answer · 2021-07-29 15:04:17Z

You could can use the onLoad prop like so:

Referenced from https://github.com/vercel/next.js/discussions/20155

const [isImageReady, setIsImageReady] = useState(false);

const onLoadCallBack = (e)=>{
   setIsImageReady(true)
   typeof onLoad === "function" && onLoad(e)
}

return(
  <div>
   {!isImageReady && 'loading image...'}
   <Image 
     onLoad={onLoadCallBack} 
     src={'/'+image} 
     alt={title} 
     width={260}  
     height={160} />
  </div>
)

******************************* UPDATE *****************************

Nextjs now provides a placeholer and blurDataURL prop with which you can show an image placeholder before the main image is loaded.

An example


<Image
 className="image"
 src={image.src}
 alt={image.alt}
 layout="fill"
 objectFit="cover"
 objectPosition="top center"
 placeholder="blur"
 blurDataURL="/images/blur.jpg"
/>

Collectives™ on Stack Overflow

How to run a function onLoad of an image in NextJS Image component

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related