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

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