vue-l-lazyload

A lazyload and in-view detection plugin for Vue.js v2.x+.

Demo

Live demo or npm install vue-l-lazyload && npm run startDev to play it!

Pull requests are welcome :)

License

LGPL-V3

Features

• No extra dependencies except Vue
• Progressive configuration
• Flexible events to trigger loading
• Lazyload as src attribute and background image are supported
• Customized retry control
• Filters for substitution of url by rules
• Performance boost by event delegation and passive event listener when it's available
• LazyComp for lazy loading child component.
• InViewComp for in-view detection

Installation

npm install vue-l-lazyload

Usage

A simple way:

import { VueLLazyload } from 'vue-l-lazyload';
// For smaller production code with tree shaking, I recommend you to import the src instead:
// import { VueLLazyloadLocal: VueLLazyload } from 'vue-l-lazyload/src';
Vue.use(VueLLazyload, {
	events: 'scroll'
});
// The root $lazy "Vue.$lazy" will be available after it's been installed

<img lazy="xxx.png">

A more configurable way:

import { VueLLazyload } from 'vue-l-lazyload';
Vue.use(VueLLazyload, config);

<lazy-ref ref="lazyRef" opts="config">
    <img lazy="{src:xxx.png, ref:'lazyRef'}">
</lazy-ref>

Vue Plugins

VueLLazyload

Vue Plugin with global option of registering directive "lazy" and component "lazy-ref".

VueLLazyloadLocal

Vue Plugin without global option of registering directives or components for local usage purpose and smaller footprint.

Config

Notes about Config

Note that ALL ANCESTORS' CONFIGS WILL BE INHERITED level by level. So be careful there may be conflict problems if you use too many ancestors' configs!

Available Config Table

[1]: All options will inherit its ancestors' options.

LazyLoader

$lazy is Instance of LazyLoader, available for LazyRef and InViewComp.

Methods

Directives

Lazy(v-lazy)

value

Extra config for the Value of Lazy

[1]: All options should not be changed after they have initialized except for [2]. [2]: It will mark the node not loaded and load again when it's in parent view. if once is set to false. [3]: All options will inherit its ancestors' options.

Components

LazyRef(lazy-ref, Experimental)

InViewComp

Extra config for opts InViewComp

[1]: All options above won't inherit its ancestors' options by now.

LazyComp

Props

Extra config for opts LazyComp

[1]: All options above won't inherit its ancestors' options by now.

Slots

Well, what's next?

• More abilities
• More test cases
• Performance optimization