Когда они стреляют?

window.onload

• По умолчанию он запускается при загрузке всей страницы, включая ее содержимое (изображения, CSS, сценарии и т. Д.).).

В некоторых браузерах он теперь берет на себя роль document.onloadи запускается, когда DOM также готов.

document.onload

• Он вызывается, когда DOM готов, который может быть до изображений и другого внешнего контента загружен.

Насколько хорошо они поддерживаются?

window.onload представляется наиболее широко поддерживаемым. Фактически, некоторые из самых современных браузеров в некотором смысле заменили document.onloadна window.onload`.

Проблемы с поддержкой браузера, скорее всего, являются причиной того, что многие люди начинают использовать библиотеки, такие как jQuery, для обработки проверки готовности документа, например:

$(document).ready(function() { /* code here */ });
$(function() { /* code here */ });

Для целей истории. window.onload vs body.onload:

Аналогичный вопрос был задан на кодирующих форумах некоторое время назад относительно использования window.onload над body.onload. , В результате вы должны использовать «window.onload», потому что это так хорошо отделить вашу структуру от действия.

Общая идея заключается в том, что window.onload запускает , когда окно документа готово к презентации , и document.onload запускает , когда DOM дерево (построенное из кода разметки в документ) завершен .

В идеале, подписка на мероприятия DOM-дерева позволяет осуществлять манипулирование за кадром через Javascript, что приводит к почти отсутствию загрузки процессора . Наоборот, window.onload может потратить некоторое время на запуск , когда несколько внешних ресурсов еще не запрошены, проанализированы и загружены.

►Тестовый сценарий:

Чтобы заметить разницу и как ваш браузер по выбору обращений вышеупомянутых обработчиков событий , просто вставьте следующий код в документ - `` < body > ``` - тег.

<script language="javascript">
window.tdiff = []; fred = function(a,b){return a-b;};
window.document.onload = function(e){ 
    console.log("document.onload", e, Date.now() ,window.tdiff,  
    (window.tdiff[0] = Date.now()) && window.tdiff.reduce(fred) ); 
}
window.onload = function(e){ 
    console.log("window.onload", e, Date.now() ,window.tdiff, 
    (window.tdiff[1] = Date.now()) && window.tdiff.reduce(fred) ); 
}
</script>

►Результат:

Вот результирующее поведение, наблюдаемое для Chrome v20 (и, вероятно, большинства современных браузеров).

• Нет `document.onload `событие.
• ` `onload `` < body > ```, один раз при объявлении внутри `< > ``` '(где событие затем действует как ```document.onload``` `).
• подсчет и действие в зависимости от состояния счетчика позволяет эмулировать оба поведения события.
• Или объявите обработчик событий ` window.onload в пределах элемента HTML-`` < head > ```.

►Пример проекта:

Приведенный выше код взят из кодовой базы этот проект (index.html и `` keyboarder.js```).

Список обработчиков событий оконного объекта см. В документации MDN.

Добавить слушателя событий

<script type="text/javascript">
  document.addEventListener("DOMContentLoaded", function(event) {
      // - Code to execute when all DOM content is loaded. 
      // - including fonts, images, etc.
  });
</script>

& Лт; hr >

Обновление марта 2017 года

1 Ванильный JavaScript

window.addEventListener('load', function() {
    console.log('All assets are loaded')
})

& Лт; hr >

2 jQuery

$(window).on('load', function() {
    console.log('All assets are loaded')
})

& Лт; hr > Удачи.

Согласно Перенос документов HTML - конец,

1. Браузер анализирует источник HTML и запускает отложенные сценарии.

2. DOMContentLoaded отправляется в документ, когда весь HTML проанализирован и запущен. Событие пузырится на «окно».

3. Браузер загружает ресурсы (например, изображения), которые задерживают событие загрузки.

4. Событие load отправляется в window.

Следовательно, порядок исполнения будет

1. Слушатели событий DOMContentLoaded window на этапе захвата
2. Слушатели событий DOMContentLoaded документа`
3. Слушатели событий DOMContentLoaded window в фазе пузыря
4. load слушатели событий (включая onload обработчик событий) window

Никогда не следует вызывать пузырьковый прослушиватель событий load (включая обработчик событий onload) в document. Можно вызывать только слушателей захвата load, но из-за загрузки субресурса, такого как таблица стилей, а не из-за загрузки самого документа.

& Лт;!- начать фрагмент: js hide: ложная консоль: истинная павиана: false - >

window.addEventListener('DOMContentLoaded', function() {
  console.log('window - DOMContentLoaded - capture'); // 1st
}, true);
document.addEventListener('DOMContentLoaded', function() {
  console.log('document - DOMContentLoaded - capture'); // 2nd
}, true);
document.addEventListener('DOMContentLoaded', function() {
  console.log('document - DOMContentLoaded - bubble'); // 2nd
});
window.addEventListener('DOMContentLoaded', function() {
  console.log('window - DOMContentLoaded - bubble'); // 3rd
});

window.addEventListener('load', function() {
  console.log('window - load - capture'); // 4th
}, true);
document.addEventListener('load', function(e) {
  /* Filter out load events not related to the document */
  if(['style','script'].indexOf(e.target.tagName.toLowerCase()) < 0)
    console.log('document - load - capture'); // DOES NOT HAPPEN
}, true);
document.addEventListener('load', function() {
  console.log('document - load - bubble'); // DOES NOT HAPPEN
});
window.addEventListener('load', function() {
  console.log('window - load - bubble'); // 4th
});

window.onload = function() {
  console.log('window - onload'); // 4th
};
document.onload = function() {
  console.log('document - onload'); // DOES NOT HAPPEN
};

& Лт;!- конец фрагмента - >

В Chrome window.onload отличается от < body onload = "" >, тогда как они одинаковы как в Firefox (версия 35.0), так и в IE (версия 11).

Вы можете исследовать это по следующему фрагменту:

        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />



        <script language="javascript">

            function bodyOnloadHandler() {
                console.log("body onload");
            }

            window.onload = function(e) {
                console.log("window loaded");
            };
        </script>




        Page contents go here.

И вы увидите как «загруженное окно» (которое приходит первым), так и «загрузку тела» в консоли Chrome. Тем не менее, вы увидите только «загрузку тела» в Firefox и IE. Если вы запустите «'window.onload.toString ()`» на консолях IE & FF, вы увидите:

"функция onload (event) {bodyOnloadHandler ()}"

что означает, что назначение "window.onload = функция (e)..."записано.

window.onload и onunload являются ярлыками для document.body.onload и document.body.onunload

обработчик document.onload и onload на всех тегах html, кажется, зарезервирован, но никогда не запускается

«onload» в документе - > правда

window.onload однако они часто одно и то же. Точно так же body.onload становится window.onload в IE .

Однако Window.onload является стандартом - веб-браузер в PS3 (на основе Netfront) не поддерживает объект окна, поэтому вы не можете использовать его там.