在 Vue 中最快实现一个图片预加载

July 30, 2022

1、把需要预加载的图片以 img 标签的写在 App.vue 中

<div class="pre-img">
  <img src="./assets/img/0.png" />
  <img src="./assets/img/1.png" />
  <img src="./assets/img/2.1.png" />
  <img src="./assets/img/3.png" />
  <img src="./assets/img/4.png" />
  <img src="./assets/img/5.png" />
  <img src="./assets/img/6.png" />
  <img src="./assets/img/7.1.png" />
  <img src="./assets/img/7.2.png" />
  <img src="./assets/img/7.3.png" />
  <img src="./assets/img/7.4.png" />
  <img src="./assets/img/7.png" />
  <img src="./assets/img/8.png" />
  <img src="./assets/img/8.1.png" />
  <img src="./assets/img/8.2.png" />
  <img src="./assets/img/8.3.png" />
  <img src="./assets/img/8.9.png" />
  <img src="./assets/img/8.png" />
  <img src="./assets/img/9.0.png" />
  <img src="./assets/img/9.1.png" />
  <img src="./assets/img/9.2.png" />
  <img src="./assets/img/9.3.png" />
  <img src="./assets/img/9.png" />
  <img src="./assets/img/12.1.png" />
  <img src="./assets/img/22.png" />
  <img src="./assets/img/23.png" />
  <img src="./assets/img/24.png" />
  <img src="./assets/img/25.png" />
  <img src="./assets/img/26.png" />
  <img src="./assets/img/37.png" />
  <img src="./assets/img/38.1.png" />
  <img src="./assets/img/38.png" />
  <img src="./assets/img/39.png" />
</div>

2、将图片隐藏即可了

.pre-img img {
  display: none;
}