参考：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">

 

 

 

 

 

 

 

标签：

版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有