浏览器重载页面时document.readyState提前变为complete，如何保证代码在所有图片加载后执行

你遇到的document.readyState提前变为complete的情况确实和浏览器缓存有关，部分浏览器在图片命中强缓存时，会错误地在图片解码渲染完成前就将文档状态标记为complete，导致逻辑提前触发。另外你原有代码存在两个语法问题：console.log('image printed=" +this)里字符串引号不配对，还有each的闭合括号位置错误，后续示例代码中已经修正。

方案1：使用window load事件（最简单） #

window.load事件本身的触发规则就是等待页面所有静态资源（包括图片、样式表、iframe等）全部加载完成后才执行，jQuery的封装已经兼容缓存和非缓存场景，实现成本最低：

$(window).on('load', function() {
  $('img').each(function() {
    console.log('image printed=' + this);
  });
});

方案2：手动监听图片加载（性能更优） #

如果不需要等待样式、第三方脚本等无关资源加载，只需要监听所有图片加载完成，可以用手动计数的方案，兼容所有场景：

const $imgs = $('img');
const totalImgs = $imgs.length;
let loadedCount = 0;

// 所有图片加载完成后执行的逻辑
function handleAllImgsLoaded() {
  $('img').each(function() {
    console.log('image printed=' + this);
  });
}

if (totalImgs === 0) {
  // 页面无图片直接执行
  handleAllImgsLoaded();
} else {
  $imgs.each(function() {
    const img = this;
    // 兼容缓存场景：图片已加载完成直接计数
    if (img.complete) {
      loadedCount++;
      loadedCount === totalImgs && handleAllImgsLoaded();
    } else {
      // 未加载完成则绑定事件，同时监听error避免加载失败阻塞逻辑
      $(img).on('load error', function() {
        loadedCount++;
        loadedCount === totalImgs && handleAllImgsLoaded();
      });
    }
  });
}

• 不要依赖DOMContentLoaded或jQuery.ready事件，这两个事件仅保证DOM树解析完成，不会等待图片资源加载
• 方案2中监听了error事件，避免单张图片加载失败导致逻辑永远不触发，如需区分加载成功/失败状态可在回调中自行扩展判断
• 如果页面存在动态插入的img标签，需要在插入节点后重新执行一次上述的计数监听逻辑

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