How to disable LazyLoading dynamically at runtime in the browser? | Community
Skip to main content
MeasurableBusinessResults
MeasurableBusinessResults
Level 3
September 2, 2022

How to disable LazyLoading dynamically at runtime in the browser?

  • September 2, 2022
  • 1 reply
  • 3625 views

On our site we're using experience fragments with images. They are using the out-of-the-box lazy loading mechanism, and in principle this works fine.

E.g.

https://experienceleague.adobe.com/docs/experience-manager-core-components/using/components/image.html?lang=en
https://experienceleague.adobe.com/docs/experience-manager-65/authoring/siteandpage/default-components-designmode.html?lang=en
https://experienceleague.adobe.com/docs/experience-manager-65/forms/adaptive-forms-advanced-authoring/lazy-loading-adaptive-forms.html?lang=en

 

I now have the following problem:

I am using Browserstack Percy cli command line client (a visual regression testing tool) on our Production site to visually validate certain pages.

This in turn uses headless Chrome browser to render the pages (with Javascript enabled).

 

The way this tool takes a comple page snapshot is: it screenshots the visible part of the page (e.g. viewport / device screen size), then scrolls down one page, then takes another screenshot etc. - and then stitches these screenshots together.

This also works in principle.

 

However: only the experience fragment images at the top are being rendered.

The ones below the fold - that only show after scrolling down - are not being rendered. Somehow headless Chrome does not trigger the lazy loading Javascript it seems.

 

Question:

Is there a way for me to switch OFF lazy loading behaviour dynamically at runtime, e.g. force all images to load immediately, by triggering some built-in flag in the AEM Javascript?

Percy can execute JS calls before taking the screenshot.

Ideally in a way that is compatible with future versions of the AEM libraries, I want to avoid reverse-engineering and using some hack that would break in a future update.

 

PS: I know I can turn off lazy loading in AEM in the content settings, but that is not an option as I am testing on Production and I need to keep this ON for my regular users. So please don't suggest that.

Also running Chrome in non-headless mode is also not an option, as it would blow up resource consumption and setting up virtual displays on our test servers.

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.

1 reply

arunpatidar
Community Advisor
arunpatidarCommunity Advisor
Community Advisor
September 2, 2022

Hi,

I think core components uses loading="lazy" attribute to enable lazy load, you can simply remove this from all the images.

 

Sample script to load in head from visual testing tool.

let allImages = document.querySelectorAll('[loading="lazy"]');
allImages.forEach((img) => {
   img.removeAttribute('loading');
});
Arun Patidar
    MeasurableBusinessResults
    MeasurableBusinessResultsAuthor
    Level 3
    September 5, 2022

    So your suggestion unfortunately does not work

      arunpatidar
      Community Advisor
      arunpatidarCommunity Advisor
      Community Advisor
      September 5, 2022

      Please check https://imagekit.io/blog/lazy-loading-images-complete-guide/ if helps

      The lazy load concept is easy, you have to figure it out where to execute this code.

      Arun Patidar
        Terms & ConditionsAccessibility statement

        Loading footer...