VUE中用new Image()实现图片预加载

在公司做了一个网站，发现传到测试环境之后，页面中的一个图片资源很多的tab切页卡顿的十分厉害，原因是只有在点击切页，切页下的内容需要展示的时候，才会去请求相应的资源，但是资源下载需要时间，就造成卡顿，图片资源已经通过压缩了，所以就想到了预加载，在页面的其他资源加载完成后，就开始提前加载Tab切页下的资源。

首先第一个问题是在vue里面怎么找到所有资源都加载完成的时间节点，我在网上找了一种方法，通过尝试，观察network的资源加载，发现是可行的。

 created(){
        this.timer = setInterval(()=>{
          console.log(document.readyState)
          if (document.readyState === 'complete') {
            window.clearInterval(this.timer)
            // 这里写静态资源加载完成的代码
          }
        },1000)
    },

找到了下预加载的地方，就很容易了，我们先确定好自己要加载的图片的路径，然后赋给new Image()的src属性就可以了，具体代码如下：

 created(){
        this.timer = setInterval(()=>{
          console.log(document.readyState)
          if (document.readyState === 'complete') {
            window.clearInterval(this.timer)
            // 这里写静态资源加载完成的代码
            let img1 = new Image();
            img1.src=require('@/assets/images/page4tab/no'+i+'_'+j+'_img.png')
          }
        },1000)
    },

当然一般情况下图片会比较多，但是如果命名比较有规律，就可以用循环来实现。

以上是工作中的一次小记录，如果有说的不对的地方请多多指教，如果有更好的办法也请不吝赐教，一起学习，一起进步，哈哈哈哈