CODEWITHSUNDEEP
javascripthtmlcss
kimomat
kimomat

Reputation: 2399

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

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.

Upvotes: 9

Views: 9468

Answers (2)

Balduin
Balduin

Reputation: 51

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

Upvotes: 0

Design Pesendorfer
Design Pesendorfer

Reputation: 134

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?

Upvotes: 6

Related Questions