search

maoberlehner / vue-lazy-hydration

Lazy Hydration of Server-Side Rendered Vue.js Components
MIT License
1.18k stars 52 forks source link

add rootMargin config for IntersectionObserver to make possible hydration a bit before item enters viewport #16

Closed wintrykiddo closed 5 years ago

wintrykiddo commented 5 years ago

thanks so much for your comprehensive work.

https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserver/rootMargin

for example if I were to set rootMargin to 20% the item would be hydrated 20% of viewport height before the item enters the viewport.

this can be useful to lazy load images a bit before they're supposed to be shown to reduce load flashes.

also, iOS safari's disappearing browser chrome (e.g. the bottom menu bar) can lead to unexpected intersection calculations, and in my app some elements at the bottom of the screen would never get hydrated unless I extend the rootMargin.

maoberlehner commented 5 years ago

That's a great idea, I'll take a look at how this could be implemented in the next couple of days! Thank you for creating this issue.