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

[kautuk_sahni]

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

Abstract

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

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





2) Add clientlib /apps/eaem-dm-modifiers-smart-crops/components/image/clientlib with categories=core.wcm.components.image.v2, file image-override.js with following code...

(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();
})();

Read Full Blog

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

Q&A

Please use this thread to ask the related questions.