今天开发中遇到一个问题，有不同class名的选择器中写了不同的背景图，但是背景图很大，清晰度高，占整个屏幕尺寸，切换时会有闪烁或者卡顿效果。本人用了一种简单粗暴的方式~

本地开发的话还只是闪一下，资源都在本地服务器拿，很快，如果上了生产或者测试，切换class类名可能会更卡

预加载的方式有很多，本人的预加载应该是最low的一种了，但也是最通俗易懂容易书写的一种，话不多说，直接上代码。

import watchF2 from './assets/watchF2.png'
import doorF2 from './assets/doorF2.png'
data() {
  return {
    preLoadList: [
       watchF2,
       doorF2
    ],
  }
}

<img :src="item" alt="" v-show="false" v-for="(item,index) in preLoadList" :key="index">

以下两个类名中的background-image需要预加载，因为不是初始类名。

 .watch_f2 {
    background-image: url('./assets/watchF2.png');
    background-size: cover;
    background-repeat: no-repeat;
  }
  .door_f2 {
    background-image: url('./assets/doorF2.png');
    background-size: cover;
    background-repeat: no-repeat;
  }

把不是初始展示的类名中的背景图以模块形式导入，存入一个list中，用for循环渲染，注意设置v-show="false",不影响布局且在dom中渲染了，此时带宽够用的情况下，用户的手速肯定比不过浏览器缓存的速度，当切换到其他类名时，里边的背景图已经有缓存了，就不会有闪烁或者卡顿。 这是一种很low很low很low的方法，不建议大家使用，后续也会改进，分享出来这个东西是想看看有多少开发者和我一样喜欢用这种简单粗暴的方法~~~。 如果屏幕前的你也赞同这种简单粗暴的方法，不妨留下一个赞~~