Vue-lazyload 的使用

Vue 项目使用 Vue-lazyload 做图片懒加载。

下载

下载 Vue-lazyload 的包
NPM包

npm install vue-lazyload --save

引入

在项目 main.js中通过 import 引入

import Vue from 'vue'
import App from '@/App'
import VueLazyload from 'vue-lazyload'

配置属性

Vue.use( VueLazyload, {
  preLoad: 1.3,
  error: require('@/assets/[email protected]'),
  loading: require('@/assets/[email protected]'),
  attempt: 1
})

官方 Api

属性	描述	默认	选项
preLoad	预加载高度的比例	1.3	Number
error	图片加载失败后	'data-src'	String
loading	图像正在加载时	'data-src'	String
attempt	尝试次数	3	Number
listenEvents	需要监听的事件	['scroll', 'wheel', 'mousewheel', 'resize', 'animationend', 'transitionend', 'touchmove']	所需监听的事件
adapter	动态修改元素的属性	{ }	元素适配器
filter	图像的 src 过滤器	{ }	图像 url 过滤器
lazyComponent	lazyload 组件	false	懒加载组件

示例

使用 v-lazy 指令

  

    

      
    
    

  
  
已经到底啦~
  
活动筹备中...