一、图片预加载

图片预加载其实就是创建Image对象，然后给Image对象绑定src属性为图片路径，这样就会先请求图片资源，之后在用到的地方就会使用缓存数据了

我的思路是这样的：

1、创建一个组件 ImgLoading.vue，去加载所以要预加载的图片

<template>
  <div class="container">
  </div>
</template>

<script>
export default {
  data () {
    return {
      count: 0,
      percent: '',
      imgs:[]
    }
  },
  mounted: function() {
    this.preload()
  },
  methods: {
    preload: function() {
        console.log('preload')
      this. imgs = [
        "../assets/img/myImg1.png",
        "../assets/img/myImg2.png",
        "../assets/img/myImg3.png",
        "../assets/img/myImg4.png",
        "../assets/img/myImg5.png"
      ]
      for (let img of this.imgs) {
        let image = new Image()
        image.src = img
        image.onload = () => {
          this.count++
          // 计算图片加载的百分数，绑定到percent变量
          let percentNum = Math.floor(this.count / this.imgs.length * 100)
          this.percent = `${percentNum}%`
        }
      }
    },
  },
  watch: {
    count: function(value) {
      if (value === this.imgs.length) {
        // 可以添加一些图片加载完成的逻辑操作
        
        console.log('图片加载完成')
      }
    }
  }
}
</script>

2、在App.vue引入组件

<template>
  <div id="app">
  	<!-- 引入组件 -->
    <ImgLoading></ImgLoading>
    
    <router-view :key="$route.fullPath" />
  </div>
</template>

这个我方法我觉得挺简单粗暴但是好用，如果有大佬有更好的方法欢迎评论区留言

二、图片懒加载

使用 vue-lazyload 插件

1、命令行下载依赖

npm install vue-lazyload --save-dev

2、在main.js中引入

import VueLazyLoad from 'vue-lazyload';
Vue.use(VueLazyLoad,{
	error:'../assets/img/error.jpg', // 加载错误的图片
	loading:'../assets/img/loading.jpg' // 加载时的图片
});

3、使用

<img v-lazy="myImg" />
<!-- myImg: '../assets/img/myImg.jpg' -->

在绑定图片路径时用 v-lazy 代替 :src
vue-lazyload目前仅支持vue1和vue2，如果想在vue3中使用可以使用下边vue3-lazy，用法都差不多

使用 vue3-lazy 插件
1、命令行下载依赖

npm install vue3-lazy --save-dev

2、在main.js中引入

import lazyPlugin from 'vue3-lazy';
createApp(App)
  .use(lazyPlugin, {
  	error: require('@/assets/img/error.jpg'),// 加载错误的图片
    loading: require('@/assets/img/loading.jpg'), // 加载时的图片
  })
  .mount('#app')

3、使用

<img v-lazy="myImg" />
<!-- myImg: '../assets/img/myImg.jpg' -->

使用方式和vue-lazyload基本一样