vue-lazyload - Image lazy loading example tutorial

零下一度
Release: 2018-05-26 16:34:18
Original
2721 people have browsed it

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
})
Copy after login

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">
Copy after login


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!

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template