为什么jQuery(document).ready可触发纯JS函数但window.load监听失效？

核心原因：两个事件的触发逻辑、生效规则完全不同 #

1. 事件触发时机差异 #

你大概率混淆了两个事件的默认触发顺序：

• jQuery(document).ready 对应原生的 DOMContentLoaded 事件，会在DOM树解析完成、所有同步脚本执行完毕后触发，此时图片、字体等大体积资源可能还未加载完成，触发时机早于window.load
• window.load 会在页面所有资源（包括图片、样式表、iframe、外部脚本）全部加载完成后才触发，理论上触发时机远晚于前者

2. window.load失效的核心原因 #

你遇到的失效、alert提前弹出的问题，基本是主题更新后引入了以下变化：

• 你的JS代码被添加了async/defer属性，或者是动态注入到页面的，当代码执行到window.addEventListener('load', myFunction)时，window.load事件已经触发完毕，原生事件绑定不会回溯执行已经触发过的事件回调，所以你的函数不会按预期执行。你看到的alert提前弹出，大概率是其他逻辑意外调用了你的函数，而非window.load事件触发的。
• 主题新增了局部刷新/客户端路由逻辑（比如pjax、前端框架渲染动态内容），页面不会触发完整的window.load事件，绑定的回调自然不会运行。
• 你调整依赖顺序的操作没有生效，插件的jQuery脚本加载时机晚于window.load事件触发时机，导致你的函数执行时依赖还未准备好。

3. jQuery写法生效的原因 #

jQuery的ready事件做了特殊兼容处理：如果绑定回调时ready事件已经触发完成，jQuery会立即执行这个回调，不会等待其他事件，无论你什么时候注入这段代码，都能保证回调被执行，刚好满足你需要等jQuery插件加载完成再运行的要求。

原生JS替代方案 #

不需要依赖jQuery也能实现完全等效的效果，写法如下：

// 功能完全等效于jQuery(document).ready
if (document.readyState === 'loading') {
  document.addEventListener('DOMContentLoaded', myFunction);
} else {
  myFunction();
}

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