Swapping lazy-loaded images to `loading="auto"` upon page load complete

user_1253298 0
Viewed 46

I have a strategy in mind for lazy loading images on a CMS (Sitecore) website, and I'm wondering if I will run into problems with it, since I am not finding examples of it being done.

The point is to improve performance, but reduce the side effect where users can get annoyed by images that are incomplete as the page is scrolled.

The strategy is using loading="lazy" on all images on the page, or only images below the fold, and upon page load, dynamically swap lazy to auto on all of these elements, from which point the browser will decide when to load the images by its own prioritization scheme.

The point is to prioritize images above the fold, but once the prioritized images and everything else are loaded, then tell the browser to load images by its own default loading behavior, so the user will be less likely to encounter incomplete images.

Are there problems I may run into doing this?

I can't imagine I am the first person to try this, but I am not finding examples in my search. Is this strategy established and documented anywhere?

lazy-loading image html
1 Answers

The strategy is using loading="lazy" on all images below the fold, and upon page load, dynamically swap lazy to auto on every image element, from which point the browser will decide when to load the images by it's own prioritization scheme.

You don't need that to do. The browser know better when he should load the image. Just stay with lazy.

Are there problems I may run into doing this?

Yes! When you don't define a width & height for the image. There are some webpages which use achnor navigation. When the browser don't know how much space the image will take, then can happend that you will get some incorrect position when navigating.

Also there are some sideeffects that will load the image later then expected. Inside a slider as an example. But the benefit to not load the image is much more enjoyable then not to lazy loading the image.

Read more about the specific use-cases in this wonderful blog article:
https://web.dev/browser-level-image-lazy-loading/

user_73873970
Related