页面图片异步刷新及加载出错自动回退旧缓存图片实现咨询

核心逻辑为先在内存预加载新图片，加载成功后再替换页面资源，加载失败直接沿用旧缓存，避免加载失败时出现裂图异常。

修改后完整代码 #

JS代码 #

var curtime = new Date().getTime();
var arrayimg = [
  "https://www.learningcontainer.com/wp-content/uploads/2020/07/Sample-JPEG-Image-File-Download.jpg?" + curtime, 
  "https://upload.wikimedia.org/wikipedia/en/9/95/Test_image.jpg?" + curtime, 
  "https://testimages.org/img/testimages_screenshot.jpg?" + curtime
];
var arrayimgLoad = [1, 1, 1];
var arrayimgOLD = ["", "", ""];
// 初始化首次加载图片
arrayimg.forEach((element, index) => {
  let imgname = "img" + index;
  arrayimgOLD[index] = element + curtime;
  document.getElementById(imgname).src = arrayimgOLD[index];
})
var myVar = setInterval(function() {
  myTimer()
}, 1000);

function myTimer() {
  arrayimg.forEach(imageupdate);
}

function imageupdate(element, index) {
  if (arrayimgLoad[index] == 1) {
    // 生成带时间戳的新图片地址
    let newImgUrl = element + new Date().getTime();
    loadImage(newImgUrl, index);
  }
}
async function loadImage(imageUrl, asindex) {
  arrayimgLoad[asindex] = 0;
  const img = new Image();
  try {
    await new Promise((resolve, reject) => {
      img.onload = resolve;
      img.onerror = reject;
      img.src = imageUrl;
    });
    // 加载成功才更新页面和缓存
    arrayimgOLD[asindex] = imageUrl;
    document.getElementById("img" + asindex).src = imageUrl;
    console.log("Image " + asindex + " 加载成功，已更新");
  } catch (e) {
    // 加载失败直接沿用旧缓存，不修改页面展示
    console.log("Image " + asindex + " 加载失败，继续使用旧缓存");
  } finally {
    arrayimgLoad[asindex] = 1;
  }
  return img;
}

HTML代码 #

<img src="" id='img0' width="30%" height="30%" />
<img src="" id='img1' width="30%" height="30%" />
<img src="" id='img2' width="30%" height="30%" />

关键优化点 #

• 新增加载异常捕获逻辑，图片加载失败时不会改动当前页面的展示内容
• 调整资源更新顺序，先在内存中完成新图片加载，再替换页面元素的src属性，全程不会出现裂图
• 新增初始化加载逻辑，页面打开后直接加载第一版图片，不会出现初始空白

内容的提问来源于stack exchange，提问作者Julio Marcelo