AEM 6.5.10 - Lazy Load Image and Smart Crop req=set,json calls in Image Core Component

Goal

Lazy loading feature in Image Core Component lazy loads the image improving performance, however with Dynamic Media enabled, the respective Smart crop settings for image prefetched using req=set,json calls (eg. https://s7d1.scene7.com/is/image/EAEM/test-zab67579_rgb?req=set,json) during page load may affect performance. Code in this post is for lazy calling req=set,json...

Demo | Package Install | Github

Solution

1) Create the Image component /apps/eaem-dm-modifiers-smart-crops/components/image with sling:resourceSuperType core/wcm/components/image/v2/image

(function() {
"use strict";

    if(!isPublishedMode()){
        return;
    }

    const DM_IMAGE = "image";
    const EAEM_DM_IMAGE = "eaem-image";
    const EAEM_BOUNDING_DIV_CSS = "eaem-bounding-div";

    function init(){
        const elements = document.querySelectorAll('[data-cmp-is="image"]');

        elements.forEach((element) => {
            element.attributes.getNamedItem("data-cmp-is").value = EAEM_DM_IMAGE;
            if(isImageInViewport(element)){
                showImage(element);
            }else{
                addListenerForImageVisibilityCheck(element);
            }
        });
    }

    function addListenerForImageVisibilityCheck(element){
        function scrollListen(){
            if(!isImageInViewport(element)){
                return;
            }

            showImage(element);

            document.removeEventListener("scroll", scrollListen);
        }

        document.addEventListener('scroll', scrollListen);
    }

    function showImage(imageDiv){
        if(imageDiv.parentNode.classList.contains(EAEM_BOUNDING_DIV_CSS)){
            console.log("Exists...");
            return;
        }

        imageDiv.attributes.getNamedItem("data-cmp-is").value = DM_IMAGE;

        //add a parent wrapper to image div, so the mutation observer in core image component (...v2/image/clientlibs/site/js/image.js)
        //picks it up, loads the image and makes a call to the respective smart crop "req=set,json"
        let eaemDivWrapper = document.createElement('div');
        eaemDivWrapper.classList.add(EAEM_BOUNDING_DIV_CSS);

        imageDiv.parentNode.appendChild(eaemDivWrapper);
        eaemDivWrapper.appendChild(imageDiv);
    }

    function isImageInViewport(el) {
        const rect = el.getBoundingClientRect();
        return (
            rect.top >= 0 &&
            rect.left >= 0 &&
            rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
            rect.right <= (window.innerWidth || document.documentElement.clientWidth)
        );
    }

    function isPublishedMode(){
        return (typeof Granite === 'undefined');
    }

    init();
})();