Add img native lazy loading + fallback

Is your feature request related to a problem? Please describe. Need of optimizing critical path of websites deferring load of multimedia below the fold.

Describe the solution you’d like Implement https://web.dev/native-lazy-loading best practices for lazy loading, now that native lazy loading is a real thing on Chrome 76 at least.

This article also presents a sort of polyfill (lazyload) in vanilla JS which seems to be well known and with an extensive documentation.

Usage of loading="lazy" could be detected at build time (via a webpack loader?) and, if found:

• add global feature detection and fallback library;
• for every images/videos/iframe where lazy loading is requested, trigger rewriting of src, srcset, etc into corresponding data-src, data-srcset, etc.

The tricky part could be to manage dynamically loaded pages, because the fallback library checks images at load or calling its update moment at the right time.

This could directly become the default because it would be opt-in by design (no loading="lazy", no code to manage it). Chrome will probably switch its loading="auto" default to be lazy instead of eager in a while, hopefully other browsers will follow it providing native lazy loading for everyone 😃

Maybe also adding a lazy prop on QImg could be a good idea, which would just resolve in adding loading="lazy" if the previously described webpack loaded takes care of everything else.

Describe alternatives you’ve considered Same stuff, but non directly integrated into Quasar, maybe with an app-extension.

Additional context

[rstoenescu]

Why not try with QIntersection or Intersection directive?

[pintaf]

+1, would love to see this integrated by default.