-
Notifications
You must be signed in to change notification settings - Fork 313
Description
Reproduction: https://stackblitz.com/edit/github-roaj2c?file=pages%2Findex.vue
I've noticed that unlike native <img> elements, <NuxtImg> doesn't seem to handle loading="lazy" correctly after the first time a page is loaded. Instead, all images are loaded immediately.
In the linked reproduciton you can see this in action. Keep an eye on the network tab.
The app starts on index.vue. If you navigate to the NuxtImg page using the provided link, only the images in the viewport will be loaded as they should. Now navigate back to the index page and back to the NuxtImg page. You will see that all images are loaded immediately, including those far below the viewport.
I have also provided a page that uses regular <img> tags. You will notice that those do not have the same issue and act as they should even after page navigation.
I hope I'm not misunderstanding what <NuxtImg> does with lazy loading. I assume it does the same as a native <img> tag and it should work accordingly.