Skip to content

Latest commit

 

History

History
140 lines (101 loc) · 4.3 KB

README.en.md

File metadata and controls

140 lines (101 loc) · 4.3 KB

Vue Lazy Component

npm Commitizen friendly Git flow work flow GitHub stars GitHub issues GitHub forks GitHub license

🐌 Vue.js 2.x component level lazy loading component

Features

  • Support load component when componet visible or will soon be visible
  • Support load compoent for time delay
  • Support load skeleton component before real component load to improve the user experience
  • Support code split to load components asynchronously

Installation

npm install @xunlei/vue-lazy-component

Online demo

https://xunleif2e.github.io/vue-lazy-component/demo/dist/index.html

Usage

Registration

Use plugin to register a global component

import VueLazyComponent from '@xunlei/vue-lazy-component'
import Vue from 'vue'

Vue.use(VueLazyComponent)

Local Registration

import { component as VueLazyComponent } from '@xunlei/vue-lazy-component'

export default {
  // ...
  components: {
    'vue-lazy-component': VueLazyComponent
  }
}

Direct <script> Include

The premise is that Vue is also use direct <script> include.

<script src="https://unpkg.com/@xunlei/[email protected]/dist/vue-lazy-component.js"></script>

Template syntax

 <vue-lazy-component
  @init="init"
  @beforeInit="beforeInit"
 >
  <!-- real component-->
  <st-series-sohu/>
  <!-- skeleton component -->
  <st-series-sohu-skeleton slot="skeleton"/>
</vue-lazy-component>

Props

Parameter Description Type Optional Default value
viewport Viewport where componet is in. Default is the window viewport. HTMLElement true null means window viewport
direction Direction of the viewport scolls. vertical or horizontal String true vertical
threshold Threshold of preload, in css synax. String true 0px
tagName Tag name of the wrapper element. String true div
timeout Delay time. If set this, whether visible or not, automatically load after the specified time Number true -

Events

Event Name Description Args
before-init Component visible or delayed cut-off caused to begin loading the real component. -
init Start to load real componet -
before-enter Real component begin enter el
before-leave Skeleton component begin leave el
after-leave Skeleton component leaved el
after-enter Real component entered el
after-init Initialization is complete -

Notes

  1. The project relies on IntersectionObserver API. To run in an earlier version of the browser, you need to include IntersectionObserver API polyfill

IntersectionObserver API polyfill

https://github.com/w3c/IntersectionObserver/tree/master/polyfill

  1. Using Scoped Component Slots require Vue 2.1.0+

Development Setup

# install deps
npm install

# serve demo at localhost:8080
npm run dev

# build library and demo
npm run build

# build library
npm run build:library

# build demo
npm run build:demo

# commit use commitizen
npm run commit

# pre publish
npm run prepublish

# generate changelog
npm run changelog

License

MIT

Copyright (c) 2017 XunleiF2E