Catchpoint WebPageTest Documentation

Lazy Loaded Images in Viewport

Return an array containing the sources of all images that have loading=lazy applied, but are visible within the initial viewport.

[lazy-in-viewport]
return new Promise(function (resolve) {
    let lazyImages = document.querySelectorAll("img[loading=lazy]");
    if (lazyImages.length == 0) {
        return resolve([]);
    }

    let observer = new IntersectionObserver(function (entries, observer) {
        observer.disconnect();
        const eagerLoadingCandidates = entries
            .filter(e => e.isIntersecting)
            .map(e => e.target.src);
        return resolve(JSON.stringify(eagerLoadingCandidates));
    });
    for (let img of lazyImages) {
        observer.observe(img);
    }
});