（生产）vue-lazyload - 图片延迟加载

参考：https://www.npmjs.com/package/vue-lazyload

CDN

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

Usage

import Vue from 'vue'
import VueLazyload from 'vue-lazyload'
Vue.use(VueLazyload, {
　　preLoad: 1.3,
　　error: 'dist/error.png',
　　loading: 'dist/loading.gif',
　　attempt: 1
})

Options

参数说明

• preLoad

　　　　描述：

　　　　例子：

• error

　　　　描述：图片加载失败后，的默认图片

　　　　例子：error: 'dist/error.png',

• loading

　　　　描述：图片加载过程中，默认显示的图片设置

　　　　例子： loading: 'dist/loading.gif',

• attempt

　　　　描述：

　　　　例子：

• listenEvents

　　　　描述：监听的事件，默认值   ['scroll', 'wheel', 'mousewheel', 'resize', 'animationend', 'transitionend', 'touchmove']

　　　　例子：listenEvents: [ 'scroll' ]

• adapter

　　　　描述：

　　　　例子：

• filter

　　　　描述：过滤图片的路径，默认{ }

　　　　例子：

• lazyComponent

　　　　描述：

　　　　例子：

实战例子

• 在main.js文件添加：

import VueLazyload from 'vue-lazyload'

Vue.use(VueLazyload, {

　　// 设置默认显示的图片
　　loading: require('common/image/default.png')
})

• 在需要用到延迟加载页面

<img width="60" height="60" v-lazy="item.imgurl">