Почему событие window.onload происходит до $(document).ready?

Как указано в этой теме: 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>

Ответ 1

Проблема не в порядке событий. Это с оберткой 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://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>

Ответ 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>

Ответ 3

Это "особенность" jQuery 3. jQuery 1.X всегда обрабатывал $ (document). Еще до $ (window).on('load'). Кроме того, $ (window).load() можно рассматривать как событие при отображении страницы. Я на 100% уверен в этом, потому что сейчас я только что попытался обновить версию jQuery до 3.X в проекте, который работал стабильно с jQuery 1.X в течение почти 10 лет. Таким образом, эта попытка превратилась в месяц головной боли, борющейся с $ (document).ready и $ (window).load. В конце концов было решено оставить его с jQuery 1.12.4, последним из поколения 1.X.