I am exploring HTML loading attribute. What I am facing is that lazy loading is perfectly working with image size in pixels but it's not working with size in % (width:100%).
Code to produce above problem:
<!-- first image -->
<div class="img-wrap">
<img src="https://wallpaperaccess.com/full/716578.jpg" loading="lazy" alt="image 1" width="100%" height="auto">
</div>
<!-- second image -->
<div class="img-wrap">
<img src="https://wallpaperaccess.com/full/346725.jpg" loading="lazy" alt="image 1" width="100%" height="auto">
</div>
<!-- third image -->
<div class="img-wrap">
<img src="https://wallpapercave.com/wp/wp9251014.jpg" loading="lazy" alt="image 1" width="100%" height="auto">
</div>
<!-- 4th image -->
<div class="img-wrap">
<img src="https://wallpaperaccess.com/full/716585.jpg" loading="lazy" alt="image 1" width="100%" height="auto">
</div>
<!-- 5th image -->
<div class="img-wrap">
<img src="https://wallpaper.dog/large/10886173.jpg" loading="lazy" alt="image 1" width="100%" height="auto">
</div>