Skip to content

Lazy loading still loads all images after first page load #1317

@Ragura

Description

@Ragura

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.

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions