Почему событие 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>

источник

2016-11-15 Hoang Vu

У вас нет контента на странице, которая влияет на событие нагрузки (то есть. Внешний CSS или изображения) поэтому 'load' пожары событие почти мгновенно. Я бы предположил, что он срабатывает перед событием document.ready jQuery из-за наложенных накладных расходов с помощью jQuery. Если вы добавите 'img' в свой HTML-код, тогда готовый обработчик начнет работать первым - как и ожидаемое поведение. –

@BharatPatidar - это вопрос, связанный с OP в их вопросе, в котором говорится, что поведение должно быть противоположным тому, что получает OP - вот в чем весь смысл этого вопроса. –

@RoryMcCrossan да, согласитесь с вашим первым комментарием – Bharat

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

источник

2016-11-20 20:44:59 Gaafar

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

источник

2016-11-15 11:45:09 Bharat

Я только что пробовал свой код. Если бы я загружал только первое изображение, поведение по-прежнему не так ожидалось. У вас есть некоторые объяснения этому? –

@HoangVu теперь вы можете видеть, что есть только одно изображение, и событие 'onload' запускается после' ready', вы можете понять, что я имею в виду. размер изображения был меньше, поэтому потребовалось больше времени, а затем время, необходимое для 'DOM', чтобы быть готовым – Bharat

@BharatPatridar. Я вижу, что размер/количество изображений имеет значение, но означает ли это, что событие' onload' не требуется ожидать, что 'DOM' будет полностью загружен или событие' ready' ждет чего-то большего, чем 'onload' без изображений? –

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

ответ

Смежные вопросы