前端开发 首页超清大图缓存 避免每一次打开网页时加载图片卡顿 和出现白屏现象

一个项目 需求是用户想要首页放超清大图 但是每次打开都需要加载很久 所以第一次加载时将用户首页图片缓存起来 下一次在进入时就不会卡顿了

js代码 图片小的可以这么搞

    if (localStorage.getItem(bgImg)) {
      this.bgImg = window.URL.createObjectURL(new Blob([res.data]));
    } else {
      this.bgImg = require("../assets/img/bgImg.jpg");
      axios
        .get(document.querySelector("#bgImg").src, {
          responseType: "arraybuffer"
        })
        .then(res => {
          if (res.status === 200) {
            localStorage.setItem("bgImg", res.data);//这块保存有问题 自己研究吧
            console.log(new Blob([res.data]));
          }
        });
    }

另一种方式

//用img做背景 src地址为一张超清大图 
<img id="bgImg" :src="../assets/img/bgImg.jpg" alt="" />
//css写   #bgImg {background: url("../assets/img/bgImg-min.jpg");}
//地址是一张缩略图 缩略图要保持在10k左右 会先显示缩略图 然后img的src的图片才会慢慢出现 不会出现白屏现象