对于一个使用大量图片的web App，图片预加载的使用很有必要了

正文

data

  data(){
	  // 预加载
	      preloadAudio: {},
	      preloadImg1: {},
	      preloadImg2: {},
	      preloadImg3: {},
	      preloadImg4: {},
	      },

钩子函数

  mounted() {
    //图片预加载-缓存单词、图片音频
    this.preloadAudio = new Audio();
    this.preloadImg1 = new Image();
    this.preloadImg2 = new Image();
    this.preloadImg3 = new Image();
    this.preloadImg4 = new Image();
  },

methods

/**
     * 图片预处理，只发请求
     * @Date: 2019年11月4日15:26:11
     * @author 苑仁杰
     */
    searchWordInfoByWordIdPre() {
      var vm = this; // 保存原有对象
      //判断是否是最后一个单词
      // console.log(1);
      // console.log(vm.wordIdList);
      vm.$axios.get(swipeLeft + "?reviewFlag=" + vm.reviewFlag).then(res => {
        if (res.data.code === "0000") {
          //储存单词和id
          //将所有图片填充到数组-暂时写死
          vm.wordListPre = [];
          vm.wordListPre.push(res.data.data.wordPicture1);
          vm.wordListPre.push(res.data.data.wordPicture2);
          vm.wordListPre.push(res.data.data.wordPicture3);
          vm.wordListPre.push(res.data.data.wordPicture4);
          vm.wordListPre.push(res.data.data.audio);
          vm.wordListPre.push(res.data.data.word);
          vm.wordListPre.push(res.data.data.id);
          vm.wordIdList.push(res.data.data.id);
          vm.preloadImg();
        }
        //GOTO
        if (res.data.code === "2222") {
          this.$toast("任务已完成，即将跳转单词检测");
          this.isTurnSuccess = true;
        }
      });
    },
 /**
     * 预加载
     * @Date: 2019年11月4日15:26:111
     * @author 苑仁杰
     */
    preloadImg() {
      // 单词资源实例化
      var vm = this;
      vm.preloadImg1.src = vm.wordListPre[0];
      vm.preloadImg2.src = vm.wordListPre[1];
      vm.preloadImg3.src = vm.wordListPre[2];
      vm.preloadImg4.src = vm.wordListPre[3];
      vm.preloadAudio.src = vm.wordListPre[4];
    },

分析

我实现的预处理其实就是在页面初始化的同时请求下一条数据，同时实例化对象，这样下一条数据就可以直接从缓存里拿了。