vue-lazyload图片懒加载

---

前言

图片懒加载又称图片延时加载、惰性加载，即在用户需要使用图片的时候加载，这样可以减少请求，节省带宽，提高页面加载速度，相对的，也能减少服务器压力。

---

一、安装

使用以下命令安装vue-lazyload插件

npm i vue-lazyload@1.2.5 -S
1

注意：这里安装1.*版本的，最新版有问题，不能识别插件的自定义指令

---

二、引入

在项目Main.js引入并注册

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

1
2
3
4
5
6
7
8

---

三、 使用

如果是图片地址是网络地址可以直接用

//v-lazy="Url"直接填线上Url就可以了
     <img v-lazy="Url" alt="权益介绍" style="width: 100%">
1
2

如果是本地路径需要先引入

 <ul class="img">
          <li v-for="(item,index) in imgList" :key="index">
            <img v-lazy="item" alt="权益介绍" style="width: 100%">
          </li>
 </ul>
 
//下面代码在data中定义

      imgList: [
        require('../../assets/images/introduction_1.jpg'),
        require('../../assets/images/introduction_2.jpg'),
        require('../../assets/images/introduction_3.jpg'),
        require('../../assets/images/introduction_4.jpg')
      ],

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15