图片预加载：

图片预加载就是在网页全部加载之前提前加载图片。当用户需要查看时可直接从本地缓存中渲染，以提供给用户更好的体验，减少等待的时间。否则，如果一个页面的内容过于庞大，没有使用预加载技术的页面就会长时间的展现为一片空白。
当然这种做法实际上降低服务器的性能换取了更好的用户体验。

图片懒加载（缓载）：

延迟加载图片或符合某些条件时才加载某些图片。这样做的好处是减少不必要的访问数据库或延迟访问数据库的次数，因为每次访问数据库都是比较耗时的即只有真正使用该对象的数据时才会创建。
懒加载的主要目的是作为服务器前端的优化，减少请求数或延迟请求数

1.安装插件

npm install vue-lazyload --save-dev

2.main.js

import VueLazyLoad from 'vue-lazyload'
Vue.use(VueLazyLoad,{
    error:'./static/error.png',   //图片加载失败显示的图片
    loading:'./static/loading.gif'// 图片加载中显示的图片
})

3.demo.vue

修改图片显示方式为懒加载（将 :src 属性直接改为v-lazy）

 <div v-for="(item, index) in list" :key="index" class="icon-item">
 <img v-lazy="gg(item.iconUrl)">
 </div>
 
 methods: {
        // 加图片时间戳的作用是在页面刷新之后使浏览器不使用缓存图片
        gg: function (g) {
          return g + '?t=' + new Date().getTime()
           }
        }