vue-lazy-renderer

Lazily render Vue.js components for performance.

Feature

• 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 1.8 kB minified + gzipped.
• Highly Customized. You can globally set several options and locally override them.

Installation

npm:

npm install vue-lazy-renderer

Yarn:

yarn add vue-lazy-renderer

Usage

Registration

Use a plugin to register a global component:

import VueLazyRenderer from 'vue-lazy-renderer';
import Vue from 'vue';

Vue.use(VueLazyRenderer);

Example

Customization

Options/Props

Parameter	Description	Type	Default
tagName	The tag name of the root node of <lazy-renderer>	String	'div'
preLoad	The proportion of a pre-loading height or width to window.innerHeight or window.innerWidth	Number	1.5
observerOptions	The Intersection Observer options	Object	{ rootMargin: '0px 50% 50% 0px' }
listenedEvents	The events you want window to listen for (used by getBoundingClientRect)	Array	['scroll', 'resize', 'orientationChange']
throttledWait	The number of milliseconds to throttle invocations to	Number	100

Events

Name	Description
load	Start to load elements wrapped in <lazy-renderer>

License

MIT