Lazy load images

[matthewlukedesign]

Featured request rather than bug report, but it'd be great to be able to integrate this with a lazyl oad package such as Nuxt LazySizes or similar.

Can obviously use the loading=lazy property but this doesn't give us any callbacks or other features.

Thoughts?

[Defite]

But loading="lazy" is native, what features do you expect?

[matthewlukedesign]

Exactly @Defite that's what I'm saying

[SkullMasher]

Hello there, I was surprise to not have loading="lazy" enabled by default as well. I would appreciate this feature as well.

While I'm at it. Thanks you very much for the work on ipx and nuxt image.

[mattatcubix]

Hello there, I was surprise to not have loading="lazy" enabled by default as well. I would appreciate this feature as well.

While I'm at it. Thanks you very much for the work on ipx and nuxt image.

Images should not be lazy loaded by default if they are above the fold. See https://web.dev/browser-level-image-lazy-loading/#avoid-lazy-loading-images-that-are-in-the-first-visible-viewport

[larry-cohen]

Hi, first thanks for this module, it's an awesome addition to Nuxt! I couldn't find loading="lazy" as part of the documentation (maybe I missed it).

I'd like to suggest a feature: lazy containers. vue-lazyload offers v-lazy-container which is quite handy.

[dosstx]

If we are lazy loading Nuxt components like so: <LazyComponent> , do we still need to put the loading="lazy" attribute in the images since the components are lazy loading anyways?

[Rigo-m]

Same issue here, I'm ok with using native lazy loading in some projects, in others I'd like to be able to leverage a more feature-complete library like lazysizes

[CHEWX]

Is there a road map on this?

The support for loading is poor at best, it cannot be the only solution shipped: https://caniuse.com/loading-lazy-attr

There is actually marketing material going out using Did you know that you can optimize its performance through images?, yet you cannot even use lazy loading on the images?

[chaderenyore]

it's a great module, the probelm I have with it though is the lazy loading that doens't work on all browsers yet. The main reason I needed an image module or component for nuxt was for lazy loading, I don't want to load the images on page load but now it turns out this module doesn't use the intersection observer like g-image for gridsome.. I looked at my network tab and saw that the images load all at once, I mean then what's the module for? With the way broswers implement features though I think it will be a long time before we can harness the full power of this module.

[danielroe]

Native lazy loading is implemented across all major browsers: https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/loading#browser_compatibility

[CHEWX]

Ship a product. Miss something critical, wait 3 years until critical issue is obsolete, close issue.

😂

[danielroe]

Sorry you feel that way. Native lazy loading has been our vision from the beginning for Nuxt Image.

[CHEWX]

It's fine, I guess clarity from the "beginning" rather than an open issue of "hope".

[chaderenyore]

So @danielroe are you saying lazy loading is now part of nuxt image?

[danielroe]

@CHEWX You are right; this issue should have been closed previously, and we should have been clearer. 🙏

@chaderenyore Lazy loading is a native browser feature supported across all major browsers and does not need to be implemented in Nuxt Image. (See my link above.)