How to enable an animation on load of the image

[samducker]

Hey so Vercel Image component has an on load callback which my colleague used to achieve the blur image animation transition on load of the actual image here

https://leeds2023.co.uk/

Is there any way to achieve this with unpic?

Also it seems lazy loaded images waits until its into the viewport before loading, is it possible on faster connections to start loading the image once the browser is idle, and only lazy load as it comes into the viewport when the browser is doing other things?

You can see this on my site here no matter how long you wait at the top of the page you will always get a lazy load on images.

https://www.luckyduck.co/work/frontline-policies

[ascorbic]

You should be able to attach an onload handler to it in the same way, because it forwards it to the native <img> tag. Lazy loading is also handled natively by the browser, and the browser takes into account various factors when deciding whether to preload it. This includes if it's idle, but also the connection speed. If you want to disable lazy loading you should set the priority attribute, which will eagerly load it.

[samducker]

Thanks for the answer, I'm presuming you mean the native onload property here https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/complete

So would you proposed solution be to attach an event listener to every image on the page, then write some logic equivalent to onload animate the image coming in.

How would I hide the actual image whilst maintaining the background. As I'm assuming that if I set the display as none or opacity to 0 before the onload has fired it will also hide my blurred background which I want to display before the image has loaded.

[ascorbic]

OK, got it. No, that's not somethign that would work out of the box. What you could do is wrap it in another element and apply the background to that. Then on load you can apply a class that animates the opacity to 1.

[samducker]

That makes sense! I’ll give this approach a go. Thanks for the advice.

…

On Thu, Apr 27 2023 at 3:42 pm, Matt Kane < ***@***.*** > wrote: OK, got it. No, that's not somethign that would work out of the box. What you could do is wrap it in another element and apply the background to that. Then on load you can apply a class that animates the opacity to 1. — Reply to this email directly, view it on GitHub ( #211 (reply in thread) ) , or unsubscribe ( https://github.com/notifications/unsubscribe-auth/AF7VYSYU4STQWR4BUOBZZATXDKATZANCNFSM6AAAAAAXLIIES4 ). You are receiving this because you authored the thread. Message ID: <ascorbic/unpic-img/repo-discussions/211/comments/5743903 @ github. com>