如何确定load和DOMContentLoaded事件的触发顺序？

Question

为什么下面的代码（ JS Bin ）以1，5，3，4的顺序启动？ 为什么2根本不点火？

根据此问题的答案，“ 4”应在“ 5”之前触发。 警报的顺序并没有显示出来。 但是，如果将body和img onload处理程序更改为执行document.write而不是alert ，则将显示5，这与该答案一致。

<!DOCTYPE html>
<html>
    <head>
      <script>
        document.addEventListener("DOMContentLoaded", function() {
          alert("1");
        });
        document.addEventListener("load", function() {
          alert("2");
        });
        window.addEventListener("load", function() {
          alert("3");
        });
      </script>
    </head>
    <body onload="alert('4')">
        <h1>Hello World!</h1>
        <img onload="alert('5')" src="https://developer.cdn.mozilla.net/media/redesign/img/logo_sprite.svg?2014-01" alt="Smiley face" width="42" height="42" />
    </body>
</html>

Answer 1

加载所有图像后触发window / body onload。

从MDN window.onload

加载事件在文档加载过程结束时触发。 至此，文档中的所有对象都在DOM中，并且所有图像，脚本，链接和子框架均已完成加载。

因此，应在触发图像加载后再加载窗口。

触发窗口/主体事件的顺序取决于您注册事件侦听器的时间

<!DOCTYPE html>
<html>
    <head>
      <script>
        document.addEventListener("DOMContentLoaded", function() {
          console.log("Head - DOMContentLoaded");
        });
        document.addEventListener("load", function() {
          console.log("head - document load");
        });
        window.addEventListener("load", function() {
          console.log("head - window load");
        });
      </script>
    </head>
    <body onload="console.log('BODY ONLOAD')">
        <h1>Hello World!</h1>
        <img onload="console.log('IMG ONLOAD')" src="https://developer.cdn.mozilla.net/media/redesign/img/logo_sprite.svg?2014-01" alt="Smiley face" width="42" height="42" />

      <script>
        document.addEventListener("DOMContentLoaded", function() {
          console.log("END - DOMContentLoaded");
        });
        document.addEventListener("load", function() {
          console.log("END - document load");
        });
        window.addEventListener("load", function() {
          console.log("END - window load");
        });
      </script>      
    </body>
</html>

会导致

“头-DOMContentLoaded”
“结束-DOMContentLoaded”
“ IMG ONLOAD”
“头窗负荷”
“身体加载”
“结束-窗口加载”

JSBin

并非所有浏览器都支持document.load。

如何确定load和DOMContentLoaded事件的触发顺序？

问题描述

1 个解决方案

解决方案1
4 已采纳 2014-10-10 15:50:28

如何确定load和DOMContentLoaded事件的触发顺序？

问题描述

1 个解决方案

解决方案1 4 已采纳 2014-10-10 15:50:28

解决方案1
4 已采纳 2014-10-10 15:50:28