New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
issue with native lazy loading #731
Comments
Describe the bug 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? <script> if ('loading' in HTMLImageElement.prototype) { const images = document.querySelectorAll('img[loading="lazy"]'); images.forEach(img => { img.src = img.dataset.src; }); } else { // Dynamically import the LazySizes library const script = document.createElement('script'); script.src = 'https://cdnjs.cloudflare.com/ajax/libs/lazysizes/4.1.8/lazysizes.min.js'; document.body.appendChild(script); } </script>To Reproduce What is the expected behavior What happened instead Steps to reproduce the behavior: In what environment (browser/device etc.) does this bug happen/not happen: |
@vxrai 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 |
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? |
I added these scripts in my php code.
<script src="lazysizes.min.js" async=""></script> <script src="ls.native-loading.min.js" async=""></script>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.
The text was updated successfully, but these errors were encountered: