为何已经缓存了的图片还是闪烁？

Question

额，GIF有点糊，将就看看吧。

图片我是使用以下方式提前加载的。

const img = new Image();
img.src = src;

浏览器这里使用的也是缓存，为什么还是会闪烁？

---

...视频好像没有录到闪烁，但总之是有图片会闪烁的，有知道原因的朋友吗？

---

大概到处试了试，没有闪烁了；
感觉用实体dom效果会好很多，不知道对不对。

const images = {
  img1: import('@/assets/images/public/calendar.svg'),
  ...
};
type imagesKeys = keyof typeof images;
let load = Object.keys(images).length;
const imagesDom = document.createElement('div');
document.body.appendChild(imagesDom);
function removeImagesDom() {
  if (--load == 0) document.body.removeChild(imagesDom);
}
// 创建一个任务，当浏览器空闲时执行
function newImage(src: string) {
  return function (deadline: IdleDeadline) {
    if (deadline.timeRemaining() > 0) {
      const img = document.createElement('img');
      img.src = src;
      img.onload = removeImagesDom;
      imagesDom.appendChild(img);
    } else {
      requestIdleCallback(newImage(src));
    }
  };
}
for (const key in images) {
  if (Object.prototype.hasOwnProperty.call(images, key)) {
    images[key as imagesKeys].then((value: any) => {
      requestIdleCallback(newImage(value.default));
    });
  }
}

Answer 1

因为图片大呗, 有缓存不需要从服务器获取图片, 但是从缓存中拿到大的图片后进行记载依然需要时间, 从上到下依次加载是浏览器的优化方式, 图片可以压缩一下
其他的一些方式:

https://juejin.cn/post/7052605351320879112