vue-lazyload - Image lazy loading example tutorial

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

Parameter Description

preLoad

Description:

Example:

error

Description: After the image loading fails, the default image

Example: error: 'dist/error.png',

loading

Description: During the image loading process, the default image settings displayed

Example: loading: 'dist/loading.gif',

attempt

Description:

Example:

listenEvents

Description: Listened events, default value ['scroll', 'wheel', 'mousewheel', 'resize', 'animationend', 'transitionend', 'touchmove']

Example: listenEvents: [ 'scroll' ]

adapter

Description:

Example:

filter

Description: The path to filter the image, default { }

Example:

lazyComponent

Description:

　Example:

Practical example

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

The above is the detailed content of vue-lazyload - Image lazy loading example tutorial. For more information, please follow other related articles on the PHP Chinese website!