HTMLImageElement.complete返回值异常，页面刷新时全返回false是什么原因？

问题原因 #

你碰到的是典型的代码执行时机早于图片加载时机的问题：

• 页面首次加载时，图片大概率命中了浏览器本地的强缓存，浏览器解析到img标签时就能直接从缓存读取完整资源，此时你同步执行的代码读取complete属性自然能拿到正确的true值。
• 刷新页面时，要么你开启了开发者工具的「禁用缓存」选项，要么图片走协商缓存需要重新和服务器校验资源有效性，你同步执行的代码跑的时候，图片还没完成加载流程，complete属性自然全为false。
  complete为true的前提是图片已经完成加载/缓存可用，你代码执行的时候这个前提还没满足，自然返回错误结果。

修复方案 #

方案1：等待页面所有资源加载完成后再执行

监听window的load事件，该事件会等页面所有静态资源（包括图片、样式、字体等）全部加载完成后才触发，此时读取complete属性一定是准确的：

window.addEventListener('load', () => {
  let imgs = document.querySelectorAll("img");
  for(let img of imgs) {
    console.log(img.complete);
  }
})

方案2：单独监听每张图片的加载状态，不需要等所有资源加载

如果不想等页面全部资源加载完才执行，可以给每张图片单独绑定事件，同时先判断当前是否已经加载完成，避免已经加载完的图片漏掉事件触发：

let imgs = document.querySelectorAll("img");

for(let img of imgs) {
  // 先判断当前是否已经加载完成
  if(img.complete) {
    console.log(true, img.src)
  } else {
    // 加载成功触发
    img.addEventListener('load', () => {
      console.log(true, img.src)
    })
    // 加载失败触发
    img.addEventListener('error', () => {
      console.log(false, img.src)
    })
  }
}

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