Fast lightweight loading attribute polyfill

[provok-me]

Loading="lazy" is the future

I saw that internally you used the IntersectionObserver API by default instead of the new loading attribute.

Compatibility

I know that the loading attribute is not well supported yet... but there's a lightweight polyfill that you could use today.
It is only 2.88 KB for the minified version. Moreover, the polyfill is compatible down to IE 9.

The benefits

In order to make a huge improvement for todays web performance challenges, you could implement the loading attribute polyfill.
This means less code maintenance, consequently less potential technical debt and a faster seo friendly nuxt-image component.

It could also allow you to avoid development errors (and therefore new issues from the community) due to custom providers urls encoding, url transformations and static generation.

See: https://github.com/mfranzke/loading-attribute-polyfill

[AndrewBogdanovTSS]

To me this polyfill looks strange since it requires generation of noscript which has known SSR issues vuejs/vue#8996 . I think it's better to do something similar to what is done in vanilla-lazyload - it uses native lazy load and falls back to IntersectionObserver if native is not supported

[Suven]

For the meantime, if you don't care too much about backwards-compability (which for me is fine.. because missing lazy-loading is not breaking the site. Having lazyloading is a progressive enhancement to me) you can just add :lazy="false" loading="lazy" as props to the component-call.

That said, I really would love to see that this component moves from a custom lazy-loading to the native one. The main argument to me really is SEO as crawlers (and also stuff like facebook) would not be able to see the images in the current implementation.

[AndrewBogdanovTSS]

@Suven yeah, it would be great to see this component become the new Nuxt standard for using images, similar to how Next deprecates standard img tag in favor of https://nextjs.org/docs/api-reference/next/image

[danielroe]

We do not plan to support a polyfill for loading=lazy as this is now broadly supported: https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/loading#browser_compatibility.

You can of course always add your own polyfill...

[AndrewBogdanovTSS]

@danielroe sometimes it just requires to wait for 4 years to resolve the issue, right? 😂

[danielroe]

I guess! Though in reality this probably could have been closed with the release of v1.