Animate native lazy load image (loading='“lazy”)

Question

Currently, images with the attribute loading="lazy" (https://web.dev/native-lazy-loading/) are displayed immediately when loaded, i.e. without fade-in effect.

Is there a way to animate images with the loading="lazy" attribute when they are loaded and preferably without JavaScript?

I know, there are many lazyloading JavaScript libraries, but just because loading is now done natively by the browser, the handling via JavaScript feels like a step back again.

Answer 1

I managed to use a simple jQuery solution, since its already used in my case:

 //fade in lazy loaded images
 $('article img').on('load', function(){
    $(this).addClass('loaded');
 });

The images have 0 opacity by default and opacity 1 from the new class

img{
    opacity: 0;
    transition: opacity 300ms ease-in-out;
}

img.loaded{
    opacity: 1;
}

This is not graceful as users w/o JS wont see the images ... but frankly i don't care ^^ To be honest, who has JS disabled?