关于图片懒加载 插件vue-lazyload的使用所遇到的一些问题

首先先贴出插件github地址:https://github.com/hilongjw/vue-lazyload
以及其使用案例地址:http://hilongjw.github.io/vue-lazyload/(这里不得不吐槽下,貌似没看到源码,只有他线上的demo,源码都是打包过后的了)
一、mint-ui 中的所使用的v-lazy指令依赖于 vue-lazyload插件
还有件事情不得不说下,笔者在使用了此插件时,还使用了mint-ui,然而mint-ui中的懒加载部分的插件使用的就是此插件,但是mint-ui官网对于这部分的使用介绍的很少,而我的业务需求又刚好需要过滤器图片资源拼接部分
二、使用mint-ui 的情况下,安装vue-lazyload会导致mint-ui引入失败。
1. 由于mint-ui在我的工程中并未使用到,所以这里我将mint-ui移除,重新安装vue-lazyload
2. 如果需要mint-ui 库的小伙伴可以尝试下,仅仅使用 mint-ui 实现懒加载,当然他的使用规则,以及一些属性的资料可以参考vue-lazyload插件,毕竟是依赖关系。
3. 切记不可在引入了mint-ui的情况下,再引入vue-lazyload,他们之间会有冲突。
三、使用方法
1. 安装
npm :

    npm install vue-lazyload -D
 yarn:
yarn add vue-lazyload -D

2.基本使用

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

Vue.use(VueLazyload)

// or with options
Vue.use(VueLazyload, {
  preLoad: 1.3,
  // 图片加载异常时,注意开发过程中如果图片放置在assets目录下,图片资源需
  // 要使用require()的方式路径引入
  error: 'dist/error.png', 
  // 图片加载中,中间段显示,和error一样,如果是assets目录下,需要使用
  // require()引入
  loading: 'dist/loading.gif',
  attempt: 1,
  filter:{
   // 通过这个方法可以对我们的图片资源路径进行修改
    webp(listener,options){
      let baseImageUrl = '/baseImagePath/image?'
       listener.src = baseImageUrl + listener.src;
   }
  }
})

new Vue({
  el: 'body',
  components: {
    App
  }
})

使用过程中注意参数preLoad(预加载高度),这个参数我在使用过程中发现,只对第一张图片有效,第二张图片加载会失效,添加了这个属性的情况下,具体为何会导致如此(图片路径已经确认无误了,但是还是一直处于加载中),还需要进一步看源码查看原因或者提问issue给作者反馈

你可能感兴趣的:(经验分享)