为什么console.log显示HTML文档中已加载的图片数量为0？

核心问题根因 #

你触发图片计数逻辑的时机早于HTML DOM节点解析完成，执行document.querySelectorAll('img')时还没读取到body内的图片标签，拿到的节点列表本身为空，所以计数始终为0。另外未兼容浏览器缓存图片的场景，也会导致部分图片不触发load事件被漏算。

修复步骤 #

• 调整脚本执行时机，保证DOM完全解析后再查询图片节点：
  可以选择两种方案二选一：
  1. 给引入的script标签添加defer属性
  2. 把所有preloader逻辑包裹在DOMContentLoaded事件回调中：

  document.addEventListener('DOMContentLoaded', () => {
    // 所有preloader逻辑放在此处
  })
  

• 新增缓存图片兼容逻辑，避免缓存图片漏统计：

  const imgList = document.querySelectorAll('img')
  let loadedCount = 0
  const totalImg = imgList.length
  
  imgList.forEach(img => {
    // 图片已加载完成（缓存命中）直接计数
    if (img.complete) {
      loadedCount++
      console.log('已加载图片数量：', loadedCount)
      checkAllLoaded()
      return
    }
    // 未加载的图片绑定load事件
    img.addEventListener('load', () => {
      loadedCount++
      console.log('已加载图片数量：', loadedCount)
      checkAllLoaded()
    })
    // 可选：添加加载错误处理，避免坏图卡住preloader
    img.addEventListener('error', () => {
      loadedCount++
      checkAllLoaded()
    })
  })
  
  function checkAllLoaded() {
    if (loadedCount === totalImg) {
      // 此处写preloader加载完成后要执行的逻辑，比如隐藏preloader
    }
  }
  

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