Vue-Lazyload

Vue module for lazyloading images in your applications. Some of goals of this project worth noting include:

• Be lightweight, powerful and easy to use

• Work on any image type

• Add loading class while image is loading

• Supports both of Vue 1.0 and Vue 2.0

Table of Contents

• Demo

• Requirements

• Installation

• Usage

• Constructor Options

• Implementation

• Basic

• Css state

• Methods

• Event hook

• LazyLoadHandler

• Performance

• Authors && Contributors

• License

Demo

Demo

Requirements

• Vue.js 1.x or 2.x

Installation

npm

$ npm i vue-lazyload -S

CDN

CDN: https://unpkg.com/vue-lazyload/vue-lazyload.js

<script src="https://unpkg.com/vue-lazyload/vue-lazyload.js"></script><script>
  Vue.use(VueLazyload)
  ...</script>

Usage

main.js:

import Vue from 'vue'import App from './App.vue'import VueLazyload from 'vue-lazyload'Vue.use(VueLazyload)// or with optionsVue.use(VueLazyload, {
  preLoad: 1.3,
  error: 'dist/error.png',
  loading: 'dist/loading.gif',
  attempt: 1})new Vue({
  el: 'body',
  components: {
    App
  }})

template:

<ul>
  <li v-for="img in list">
    <img v-lazy="img.src" >
  </li></ul>

use v-lazy-container work with raw HTML

上一篇：vue图片动态引入
下一篇：vue监听路由变化针对浏览器后退业务处理