Place Holder for Image in AEM

[apurba-bs23]

Hi,

I want to implement a place holder for image loading as following criteria.
1 . The place holder must be the same size of image that will be loaded later and can vary in different screen sizes.
2.  The purpose of the place holder is to prevent Layout Shifting. So when page loads this place holder should visible as well.

Can anyone help me on this ?

[SarahXu]

Probably best for https://experienceleaguecommunities.adobe.com/t5/adobe-experience-manager/ct-p/adobe-experience-mana...!

[partyush · Accepted solution]

Hi @apurba-bs23 

Certainly, implementing a placeholder for images in AEM (Adobe Experience Manager) is a good practice to prevent layout shifting and improve user experience. Here's how you can achieve this:

HTML Structure for Placeholder:

Create an HTML structure for the image placeholder that matches the dimensions of the actual image. You can set the dimensions using inline styles or classes:

<div class="image-placeholder" style="width: 100%; height: auto;">
    <!-- Placeholder content, such as a loading spinner or a blank div -->
</div>

In this example, the width is set to 100% to match the width of the image. The height is set to auto, so the aspect ratio is maintained.

CSS Styling:

Apply CSS styles to the placeholder element to make sure it maintains the same dimensions as the actual image

.image-placeholder {
    position: relative;
    display: block;
    overflow: hidden;
}

• The position: relative; and display: block; ensure the placeholder is positioned correctly within its container. The overflow: hidden; hides any content that might be added to the placeholder.

• JavaScript to Display Placeholder:

  To ensure the placeholder is visible before the image is loaded, you can use JavaScript. Add a class to the placeholder element, which sets its opacity to 1:

document.addEventListener("DOMContentLoaded", function () {
    var placeholder = document.querySelector(".image-placeholder");
    placeholder.classList.add("visible");
});

In this example, the .visible class could have the following style:

Replace Placeholder with Image:

When the actual image is loaded, you can replace the placeholder with the loaded image. You can do this using JavaScript or any front-end framework you're using.

var image = new Image();
image.src="path/to/your/image.jpg";
image.onload = function () {
    var placeholder = document.querySelector(".image-placeholder");
    placeholder.parentNode.replaceChild(image, placeholder);
};

By following these steps, you'll achieve a responsive image placeholder that matches the dimensions of the actual image and prevents layout shifting by showing the placeholder while the image loads. Remember to adjust the styles and behavior based on your specific requirements and the frameworks you're using.

Thanks