How to disable LazyLoading dynamically at runtime in the browser?

[curious2improve]

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.ht...
https://experienceleague.adobe.com/docs/experience-manager-65/authoring/siteandpage/default-componen...
https://experienceleague.adobe.com/docs/experience-manager-65/forms/adaptive-forms-advanced-authorin...

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.

[arunpatidar]

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

[curious2improve]

So your suggestion unfortunately does not work

[arunpatidar]

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.

[curious2improve]

1.  the lazy loading solutions are not "easy", as shown by the fact that in some cases it does not get triggered in the browser (my problem) and the fact that your first solution did not work
2. the link you shared is generic documentation and no solution to my specific problem.

"I have to figure it out" - no really?