issue with native lazy loading

[vxrai]

I added these scripts in my php code.

and I notice that even for browsers that support native loading, the lazysizes script is using js based lazy load and not the native loading feature. As per this link - https://web.dev/native-lazy-loading/ As soon as the script detects that the browser supports native loading, all the src tags of the image should be replaced by the value in the data-src. But in this case when I use the ls.native-loading.min.js , after the page load I see that in the inspect element(chrome latest version) the images that are not yet visible in the dom have not updated the src folder yet and src of the image gets filled through the javascript on scroll when those objects appear in viewport.

[aFarkas]

https://github.com/aFarkas/lazysizes/blob/gh-pages/.github/ISSUE_TEMPLATE/bug_report.md

[vxrai]

Describe the bug I came across lazysizes native loading through this link - https://web.dev/native-lazy-loading/ As soon as the script detects that the browser supports native loading, all the src tags of the image should be replaced by the value in the data-src. But in this case, when I use the ls.native-loading.min.js after the page load I see that in the inspect element(chrome latest version) the images that are not yet visible in the dom have not updated the src folder yet and src of the image gets filled through the javascript on scroll when those objects appear in viewport.

Do we have to add this code below as well along with "lazysizes.min.js" and "ls.native-loading.min.js" or is the below code already a part of ls.native-loading.js?

To Reproduce https://codepen.io/varun-rai/pen/OJPjPXr

What is the expected behavior As per this code above, when native loading feature is detected in the browser all the src tags in images should be replaced by the data-src tags and incase the native loading feature is not detected in the browser then lazy loading js takes care of lazy load. Do we need to add this above code along with the lazy load scripts or is this already taken care of -

What happened instead I added the above scripts, and in case of the latest version of chrome browser which supports native-lazy loading feature, the src tags were not replaced by the ls.native-loading.min.js right after the page loaded. I checked the dom and the src values were updated on scroll through lazysizes.min.js, which is the default behavior of the lazysizes js. How do we check if the browser is using native-lazy loading or lazysizes?

Steps to reproduce the behavior: If you check the screenshot of the chrome inspect tool below you will notice that even though the browser (for https://codepen.io/varun-rai/pen/OJPjPXr) has native loading feature in browser, still the src tags were not loaded for all images on page load by the ls.native-loading.min.js with loading="lazy" Only the images visible in the viewport have src value set for them. All the other images below that have an empty src value which is set on scroll by the lazysizes.min.js Native lazy loading of the browser doesn't seem to be in play.

In what environment (browser/device etc.) does this bug happen/not happen: This bug is reproduced in all devices for Chrome latest version.

[aFarkas]

@vxrai First of all: I can not reproduce your observation that only a few images are transformed while others are not. Also your elements panel image doesn't show that. All images there have a src attribute.

What I can reproduce is that with how you include the scripts it is possible that the native transformation isn't done right away but some time later on scroll.

This is not a bug and in general everything is happening here as expected. But a little bit different than you thought and this is why you think it is not working.

You have to include ls-native-loading + lazysizes core script to get the thing working.

All lazysizes plugins have the ability to be executed lazy if they do not find a global lazysizes version. And this is what is happening here. If you would include lazysizes and after that ls-native-loading without the async attribute you would see exactly what you expect, but due to the fact that ls native loading doesn't find a global lazysizes version the plugin waits for the first lazyunveilread event and executes then. This means until this time the plugin is not running, but after that it fully enables native lazyloading. So it looks like it doesn't work, but actually it works only a little bit later.

[vxrai]

If we include both ls-native-loading + lazysizes core script to get the thing working, then how can we test whether the lazy load is working because of the lazysizes core script or is it the native browser lazy loading feature. How can we test that? And in case we want a gray image placeholder in src, will the ls-native-loading work with src placeholder or we can only have the data-src tag for ls-native-loading to work properly.