vue-lazyload是比较常用的vue图片懒加载插件。配置和使用比较简单。当需要加载大量图片的时候可以使用该插件。

简易版配置步骤:

1. cnpm或者npm安装

cnpm i  vue-lazyload -S   #安装至develop中

npm install vue-lazyload --save-dev

2. main.js中引入并配置参数

比较常用的参数是图片加载错误(error)和预加载时显示的图片(loading)

import VueLazyLoad from 'vue-lazyload'
Vue.use(VueLazyLoad,{
    error:'./static/error.png',    //图片路径错误时加载图片
    loading:'./static/loading.png'   //预加载图片

}) 

3. 在vue文件中使用

将vue中的img图片绑定图片绑定 v-bind:src 修改为 v-lazy

<img class="demo_img" v-lazy="data.imgUrl"/>

附:

git地址:https://github.com/hilongjw/vue-lazyload

vue-lazyload简单配置

相关文章:

  • 2021-11-27
  • 2022-12-23
  • 2021-11-29
  • 2021-12-16
  • 2022-03-08
  • 2022-12-23
  • 2022-12-23
猜你喜欢
  • 2022-12-23
  • 2022-12-23
  • 2021-06-19
  • 2021-11-27
  • 2021-11-27
相关资源
相似解决方案