vue-lazyload - 图片延迟加载实例教程

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

以上就是vue-lazyload - 图片延迟加载实例教程的详细内容，更多请关注其它相关文章！