在vue中使用vue-lazyload实现图片懒加载

一、背景需求

如果在初始化页面的时候，一次性将所有图片资源都加载完毕
可能会降低页面渲染的速度，降低用户体验
我们可以借助 vue-lazyload 插件实现图片的懒加载
当页面被初始化时，只加载 在可视区域内的图片
当用户向下滚动页面时，再去加载剩余的图片资源

二、安装与使用

npm 安装

npm i vue-lazyload -S

在main.js中引入，并自行配置

import VueLazyLoad from 'vue-lazy-load'

Vue.use(VueLazyLoad,  {
  error: 'dist/error.png', // 图片资源加载失败时所显示的图片
  loading: 'dist/loading.gif' // 图片资源加载前的替代图片
})

更多的基础配置，请参考 vue-lazyload 的官方文档

在 img 标签中中使用 v-lazy 代替 src 属性即可

<li
      v-for="item in discList"
      :key="item.dissid"
      class="item">
          <div class="icon">
                <img width="60" height="60" v-lazy="item.imgurl" />
          </div>
 </li>