为什么 window.onload 事件发生在 $(document).ready 之前？

Question

如本帖所述：window.onload vs $(document).ready()。 window.onload 应该晚于 $(document).ready() 发生，但是在这个简单的代码中，日志会显示 onload 事件在就绪事件之前执行？我在这里错过了什么？

<!DOCTYPE html>
<html>

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
</head>

<body>
  <h1>A Simple Site</h1>
  <script>
    $(document).ready(function() {
      console.log("ready event fired");
    })
     window.onload = function() {
      console.log("onload event fired");
    }
  </script>
</body>

</html>

Answer 1

@RoryMcCrossan 说得对，你的 html 中没有任何东西可以加载到 window 上，比如（图像、视频等）。现在您可以看到事件的行为是如何改变的

<!DOCTYPE html>
<html>

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
   <img src="http://www.wallpapereast.com/static/images/Unique-And-Beautiful-Wallpaper-HD.jpg" alt="Alternate Text" />

  
</head>

<body>
  <h1>A Simple Site</h1>
  <script>
    $(document).ready(function() {
      console.log("ready event fired");
    })
     window.onload = function() {
      console.log("onload event fired");
    }
  </script>
</body>

</html>

Answer 2

问题不在于事件的顺序。它与 jQuery 包装原生 DOM 事件。如果您尝试原生 DOMContentLoaded，您会发现它总是在 window.onload 之前运行。但是 jQuery 事件 $(document).ready 将在 DOMContentLoaded 之后几毫秒出现，在某些情况下也可能在 window.onload 之后，特别是如果页面没有像下面的代码那样需要加载太多内容。这是由于 jQuery 实施造成的延迟。

如果您取消注释代码中的 iframe，加载需要一些时间，导致 window.onload 延迟，因此 $(document).ready 将首先出现。

<!DOCTYPE html>
<html>

<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
</head>

<body>
    <h1>A Simple Site</h1>
    <!-- <iframe src="http://whosebug.com"></iframe> -->
    <script>
        $(document).ready(function() {
            console.log("jQuery ready");
        })
        
        document.addEventListener("DOMContentLoaded", function(event) {
            console.log("DOM ready");
        });
        
        window.onload = function() {
            console.log("DOM loaded");
        }
    </script>
</body>
</html>

Answer 3

这是 jQuery 3 的 "feature"。jQuery 1.X 总是处理 $(document).ready在 $(window).on('load') 之前。此外， $(window).load() 可以被视为页面呈现时的事件。我对此有 100% 的把握，因为现在我刚刚尝试将 jQuery 版本升级到 3.X 的项目中，该项目与 jQuery 1.X 稳定工作了近 10 年年。所以这次尝试变成了一个月的头痛与$(document).ready 和$(window).load 的斗争。最后决定保留 jQuery 1.12.4，最新的 1.X 代。

为什么 window.onload 事件发生在 $(document).ready 之前？

Why does window.onload event occur before $(document).ready?

javascript

jquery

onload

document-ready