Vue Lazy Component

🐌 Vue.js 2.x 组件级懒加载方案-Vue.js 2.x component level lazy loading solution
Alternatives To Vue Lazy Component
Project NameStarsDownloadsRepos Using ThisPackages Using ThisMost Recent CommitTotal ReleasesLatest ReleaseOpen IssuesLicenseLanguage
Vue Lazyload7,8373,848689a month ago74June 02, 2022193mitJavaScript
A Vue.js plugin for lazyload your Image or Component in your application.
Splide3,82132a month ago148September 21, 202244mitTypeScript
Splide is a lightweight, flexible and accessible slider/carousel written in TypeScript. No dependencies, no Lighthouse errors.
Vue Content Placeholders1,561309a year ago3November 13, 201714mitJavaScript
Composable components for rendering fake (progressive) content like facebook in vue
V Lazy Image86930164 months ago15February 13, 202215mitJavaScript
Lazy load images using Intersection Observer, apply progressive rendering and css animations.
Vue Lazy Component822883 years ago11May 24, 20189mitVue
🐌 Vue.js 2.x 组件级懒加载方案-Vue.js 2.x component level lazy loading solution
5 years ago9Vue
Vue Meituan676
2 years ago5Vue
:hamburger: :meat_on_bone: :fork_and_knife: 基于Vue 全家桶 (2.x)制作的美团外卖APP
a year ago56JavaScript
record and share
3 months ago26Vue
Vue2 Douban Market537
2 years ago8Vue
一个vue全家桶入门Demo !
Alternatives To Vue Lazy Component
Select To Compare

Alternative Project Comparisons

Vue Lazy Component

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

🐌 Vue.js 2.x 组件级懒加载方案

English version documentation


  • 支持 组件可见或即将可见时懒加载
  • 支持 组件延时加载
  • 支持 加载真实组件前展示骨架组件,提高用户体验
  • 支持 真实组件代码分包异步加载

安装 / Installation

npm install @xunlei/vue-lazy-component

在线demo / Online demo


1. 注册组件

方式1 利用插件方式全局注册

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


方式2 局部注册

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

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

方式3 独立版本引入,自动全局注册

前提是 vue 也是独立版本通过script标签引入

<script src="[email protected]/dist/vue-lazy-component.js"></script>

2. 模版语法

  <!-- real component-->
  <!-- skeleton component -->
  <st-series-sohu-skeleton slot="skeleton"/>


参数 说明 类型 可选值 默认值
viewport 组件所在的视口,如果组件是在页面容器内滚动,视口就是该容器 HTMLElement true null,代表视窗
direction 视口的滚动方向, vertical代表垂直方向,horizontal代表水平方向 String true vertical
threshold 预加载阈值, css单位 String true 0px
tagName 包裹组件的外层容器的标签名 String true div
timeout 等待时间,如果指定了时间,不论可见与否,在指定时间之后自动加载 Number true -


事件名 说明 事件参数
before-init 模块可见或延时截止导致准备开始加载懒加载模块 -
init 开始加载懒加载模块,此时骨架组件开始消失 -
before-enter 懒加载模块开始进入 el
before-leave 骨架组件开始离开 el
after-leave 骨架组件已经离开 el
after-enter 懒加载模快已经进入 el
after-init 初始化完成 -

注意 / Notes

  1. 该项目依赖 IntersectionObserver API,如需在较低版本浏览器运行,需要引入 IntersectionObserver API polyfill

IntersectionObserver API polyfill

  1. webpack 分包异步加载方式依赖 Scoped Component Slots, 需要 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


  • [x] SSR 支持 @ v1.1.0

  • [ ] UI单元测试 @ v1.2.0

  • [ ] 减少性能开销 @ v1.3.0



Copyright (c) 2017 XunleiF2E

Popular Lazy Loading Projects
Popular Vue Projects
Popular User Interface Categories
Related Searches

Get A Weekly Email With Trending Projects For These Categories
No Spam. Unsubscribe easily at any time.
Lazy Loading