Eager Loading

[hecktarzuli]

I haven't played with this yet, but per our Nuxt Meeting today, @pi0 wanted me to put this in as a reminder.

We should be able to eager load images just BELOW the viewport (similar to lazysizes). The goal is for the user to never actually have to see an image load. I assume this window (#px) would be configurable in the nuxt config and maybe even at other levels.

You should be able to just pass a rootMargin to the observer options with the required eager amount.

You could also take into account the device/network to expand the eager window (similar to what Chrome does for loading=lazy)

[farnabaz]

With intersectOptions users can control rootMargin and other options of IntersectionObserver

Thank you ❤️