vue的图片懒加载

懒加载的优点

1. 有助于前端性能优化
2. 提高首屏加载速度
3. 提升用户体验
4. 减少带宽压力
5. 图片相应加载，避免首次加载图片过多

 

文档参考网站：https://www.npmjs.com/package/vue-lazyload

 

使用方法：

1.全局安装

$ npm i vue-lazyload -S
或者
$ npm install vue-lazyload --save

2.在main.js中引入

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

  Vue.use(VueLazyload, {

    preLoad: 1.3,

    error: 'dist/error.png',

    loading: 'dist/loading.gif',// 成功加载图片前，预加载的本地图片

    attempt: 1

  })

3.vue文件中使用

<ul>
  <li v-for="img in list">
    <img v-lazy="img.src" >
  </li>
</ul>

v-lazy后面的内容是变量，当为常量时，可以加上引号，让常量变成变量格式

4.效果展现

4.1.图片加载成功前，显示的loading.gif图片(本地的)

 

 4.2.图片加载成功后，显示加载后的图片(请求的图片数据)