vue项目中使用懒加载

一、下载vue-lazy-load插件

npm install npm install vue-lazyload --save-dev

在main.js文件中使用

import VueLazyLoad from 'vue-lazyload'
//以下配置选一种
//（1）默认配置
Vue.use(VueLazyLoad)  
// （2）自定义配置
Vue.use(VueLazyLoad, {
  preLoad: 1.3,    //预加载高度比例
  error: require('@/assets/images/home/noPicture.jpg'), //图片路径错误时加载图片
  loading: require('@/assets/images/home/loading.gif'), //预加载图片
  attempt: 7   //尝试加载图片数量
}) 

需要使用懒加载的图片

//只需要把:src改成v-lazy就好了
<img v-lazy="item.coverMedium" class="knowledgeImg">

注意：在main.js中配置的错误图片和预加载图片会使用到整个项目，由于项目中的图片大小不同的问题，最好在页面中配置

<img v-lazy="{src：item.coverMedium,error:require('../../assets/images/home/noPicture.jpg'),loading:require('../../assets/images/home/loading.gif')}" class="knowledgeImg">
//如果是背景图
<img v-lazy:background-image="{src: `http://192.168.1.18:5010/${item.coverMedium}`,error:require('../../assets/images/home/noPicture.jpg'),loading:require('../../assets/images/home/loading.gif')}" class="knowledgeImg">