vue项目优化之图片懒加载

对于图片过多的页面，为了提高页面加载速度，我们可以将页面上未出现在可视区域的图片先不做加载，等图片滚动到屏幕可视区时再去加载。这样对于页面加载性能上会有很大的提升，也提高了用户体验。我们在项目中使用 Vue 的 vue-lazyload 插件：

1文档：https://github.com/hilongjw/vue-lazyload

2 安装

cnpm i vue-lazyload -S
或
npm i vue-lazyload -S

3 插件的使用：main.js:

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

Vue.use(VueLazyload)//【1】懒加载使用（和下面一句2选1）

//【1】懒加载使用，且入全局配置，在使用处就不用配置错误图片等（2选1） r with options
// Vue.use(VueLazyload, {
//   preLoad: 1.3, //加载时间
//   error: 'dist/error.png', //图片错误显示此图
//   loading: 'dist/loading.gif', //加载过程显示此图
//   attempt: 1 //默认加载张数
// })
 
 
new Vue({
  el: 'body',
  components: {
    App
  }
})
 <