Lazily render Vue.js components for performance.
npm install vue-lazy-renderer> Lazily render Vue.js components for performance.
- Speed. Use the Intersection Observer API (IO) to prevent performance problems.
- Degrade Gracefully. If a user's browser doesn't support the IO, use getBoundingClientRect instead. (vue-lazy-renderer does not load the IO polyfill—it is too fat. You can load it by yourself.)
- Lightweight. Only 3.7 kB minified.
- Highly Customized. You can globally set several options and locally override them.
npm:
``shell`
npm install vue-lazy-renderer
Yarn:
`shell`
yarn add vue-lazy-renderer
Use a plugin to register a global component:
`javascript
import VueLazyRenderer from 'vue-lazy-renderer';
import Vue from 'vue';
Vue.use(VueLazyRenderer);
`
| Parameter | Description | Type | Default |
|---|---|-|-|
| tagName | The tag name of the root node of | String | 'div' |window.innerHeight
| preLoad | The proportion of a pre-loading height or width to or window.innerWidth | Number | 1.5 |window
| observerOptions | The Intersection Observer options | Object | { rootMargin: '0px 50% 50% 0px' } |
| listenedEvents | The events you want to listen for (used by getBoundingClientRect) | Array | ['scroll', 'resize', 'orientationChange'] |
| throttledWait | The number of milliseconds to throttle invocations to | Number | 100 |