动画原生延迟加载图像（loading='“lazy”）

Question

Currently, images with the attribute loading="lazy" ( https://web.dev/native-lazy-loading/ ) are displayed immediately when loaded, ie 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?

Answer 2

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

Answer 3

I think you have to use @keyframes, something like:

@keyframes lazy-kf{
    from {opacity:0;}
    to {opacity:1;}
}
img[loading=lazy] {
    animation: lazy-kf 5s;
}