Chuckie's Blog

vue-lazy-load

发表于 更新于 分类于
本文字数： 1.3k 阅读时长 ≈ 1 分钟

vue-lazyload

vue-lazy-load用于实现图片懒加载，即在需要图片显示时才加载图片

介绍及使用

基础使用

  • 1 安装
1
npm install vue-lazyload --save
  • 2 导入（main.js）
1
import VueLazyLoad from 'vue-lazyload'
  • 3 Vue.use安装
1
Vue.use(VueLazyLoad)
  • 4 ：src–>v-lazy
1
2
3
4
5
6
//原生
<img src="./img.png"/>
<img :src="./img.png"/>  //vue中传值时

//使用懒加载
<img v-lazy="./img.png"/>

带参使用

  • Vue.use安装带参
1
2
3
4
5
6
Vue.use(VueLazyload, {
  preLoad: 1.3,
  error: 'dist/error.png',
  loading: 'dist/loading.gif',
  attempt: 1
})
  • 参数列表
key description default options
preLoad proportion of pre-loading height 1.3 Number
error src of the image upon load fail 'data-src' String
loading src of the image while loading 'data-src' String
attempt attempts count 3 Number
listenEvents events that you want vue listen for ['scroll', 'wheel', 'mousewheel', 'resize', 'animationend', 'transitionend', 'touchmove'] Desired Listen Events
adapter dynamically modify the attribute of element { } Element Adapter
filter the image’s listener filter { } Image listener filter
lazyComponent lazyload component false Lazy Component
dispatchEvent trigger the dom event false Boolean
throttleWait throttle wait 200 Number
observer use IntersectionObserver false Boolean
observerOptions IntersectionObserver options { rootMargin: ‘0px’, threshold: 0.1 } IntersectionObserver
silent do not print debug info true Boolean