Currently, images with the attribute loading="lazy" (/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.

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.

• javascript
• html
• css

2 Answers 2

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?

Unfortunately it is not as simple as the simple jQuery solution above. .on('load') does not work properly for all Browsers (like Chrome) as discussed here: Check if an image is loaded (no errors) with jQuery