Track lazyloaded images with JS above the fold

[guaca]

Description

According to the 2022 Web Almanac, 9.8% of mobile pages with image-based LCP set loading=lazy on them. And 8,8% use custom lazy-loading.

The current snippet only tracks lazy-loaded images using the native loading="lazy" attribute. Hence, it's only useful for 52% of mobile pages using any lazy-loading approach on LCP images.

Proposed solution

With this update, the snippet also tracks lazy-loaded images via JS, looking for "data-src" attributes.

I've also updated the return statement to return an array with all the lazy-loaded elements or false if no image above the fold was lazy-loaded.

[nucliweb]

This is awesome 🤩

Thank you @guaca

[verlok]

Lovely. I’ve also seen lazy loaded images with data-origin in old versions of jQuery LazyLoad, which have been migrated to new LazyLoad libraries, like my vanilla-lazyload by changing the default options of the library.

So probably also adding data-origin would be more complete, but… old things, I’m not sure.