【vue】图片懒加载 vue-lazyload 使用

---

前言

图片是网站优化的一个重点，图片懒加载是其中比较好用的一个方法。jquery也有很多图片懒加载的插件，今天看了一下vue的图片懒加载插件 ---- vue-lazyload。

---

提示：以下是本篇文章正文内容，下面案例可供参考

一、使用步骤

1.引入库

npm install vue-lazyload

2.main.js中全局注册

import VueLazyLoad from 'vue-lazyload'
Vue.use(VueLazyLoad, {
    
    
  preLoad: 1,
  error: require('./assets/img/error.jpg'),
  loading: require('./assets/img/homePage_top.jpg'),
  attempt: 2,
})

3.项目中使用

img标签中使用懒加载：v-lazy 代替 :src,使用时最好给一个 key 属性，即：

<img v-lazy="图片地址" :key="图片地址">

如果使用v-lazy报错，不妨把:key加上看看

4.最后

附上项目地址：vue-lazyload

下班~