Question

如本主题所述：window.onload vs $(document).ready()。 window.onload应该晚于$(document).ready()，但在这个简单的代码中，日志会显示{ready}事件之前执行onload事件？我在这里想念的是什么？

＆＃13;

<!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>

＆＃13;

Answer 1

问题不在于事件的顺序。它与本机DOM事件周围的jQuery包装器。如果您尝试使用原生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://stackoverflow.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 2

@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 3

这是jQuery 3的“功能”。jQuery 1.X始终在$（window）.on（'load'）之前处理始终处理$（document）.ready。此外，$（window）.load（）可以视为呈现页面时的事件。我对此有100％的肯定，因为现在我刚刚尝试在一个已经使用jQuery 1.X稳定运行近10年的项目中将jQuery版本升级到3.X。因此，这种尝试变成了一个月苦苦挣扎的$（document）.ready和$（window）.load。最终决定将其保留为最新的1.X版本jQuery 1.12.4。

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

3 个答案: