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

 

CDN

 

 

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">