首页  >  文章  >  web前端  >  vue-lazyload - 图片延迟加载实例教程

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

零下一度
零下一度原创
2018-05-26 16:34:182723浏览

 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 - 图片延迟加载实例教程的详细内容。更多信息请关注PHP中文网其他相关文章!

声明:
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn