简介
在前端开发中，经常会使用 window 对象上的 "load" 事件来执行一些需要页面完全加载后才能运行的任务。但是，在某些情况下，我们可能需要知道这个事件是否已经被触发过了。比如，在一个多页应用中，我们希望在第二个页面加载时执行某些任务，但是我们不知道第一个页面是否已经触发了 "load" 事件。
本文将介绍三种方法来判断 window 的 "load" 事件是否已经触发过了。
方法一：检查 document.readyState 属性
当 document.readyState 的值变成 "complete" 时，就表示页面已经完全加载完成了。因此，我们可以通过检查 document.readyState 的值是否为 "complete" 来判断 "load" 事件是否已经触发过了。
-- -------------------- --- ----------- -
-- ------ --------
- ---- -
------------------------------- ---------- -
-- ------ --------
---
-需要注意的是，如果在 "load" 事件之前添加了该事件的监听器，则可以避免在 "load" 事件触发后才执行相关任务。
方法二：使用 window.performance.timing.loadEventEnd 属性
window.performance.timing 对象包含了页面各种事件的时间戳。其中，loadEventEnd 属性表示 "load" 事件完成的时间戳。如果该属性的值大于 0，则表示 "load" 事件已经触发过了。
-- ------------------- -- -------------------------------------- - -- -
-- ------ --------
- ---- -
------------------------------- ---------- -
-- ------ --------
---
-需要注意的是，window.performance.timing 对象可能不支持旧版浏览器，因此应该先检查其是否存在。
方法三：使用 readystatechange 事件
当 document.readyState 的值从 "loading" 变为 "interactive" 时，就表示 DOM 已经可以被操作了。而当 document.readyState 的值变成 "complete" 时，就表示页面已经完全加载完成了。因此，我们可以通过监听 readystatechange 事件，并检查 document.readyState 的值来判断 "load" 事件是否已经触发过了。
--------------------------------------------- ---------- -
-- -------------------- --- ----------- -
-- ------ --------
-
---需要注意的是，如果在 "readystatechange" 事件之前添加了 "load" 事件的监听器，则可以避免在 "load" 事件触发后才执行相关任务。
结论
本文介绍了三种方法来判断 window 的 "load" 事件是否已经触发过了。这些方法可以帮助我们在必要的时候执行一些需要页面完全加载后才能运行的任务。需要注意的是，在使用这些方法时，应该考虑浏览器兼容性和代码执行顺序等因素。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/30227