window.onload против document.onload - PullRequest
Новая
       28

window.onload против document.onload

598 голосов
/ 26 февраля 2009

Что более широко поддерживается: window.onload или document.onload?

Ответы [ 8 ]

613 голосов
/ 26 февраля 2009

window.onload

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

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 против body.onload

Как примечание, аналогичный вопрос задавался на codingforums некоторое время назад относительно использования window.onload сверх body.onload. В результате вы должны использовать window.onload , потому что хорошо отделить вашу структуру от действия.

253 голосов
/ 10 сентября 2011

Общая идея заключается в том, что 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>

►Result:

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

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

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

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

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

92 голосов
/ 28 июня 2016

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

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

Update March 2017

1 Ванильный JavaScript 

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

2 jQuery 

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

Удачи.
63 голосов
/ 22 июля 2016

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

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

  2. A DOMContentLoaded отправляется в document, когда весь HTML был проанализирован и запущен. Событие переходит в window.

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

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

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

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

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

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
};
12 голосов
/ 26 января 2015

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

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

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <!--import css here-->
        <!--import js scripts here-->

        <script language="javascript">

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

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

    <body onload="bodyOnloadHandler()">

        Page contents go here.

    </body>
</html>

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

"функция onload (событие) {bodyOnloadHandler ()}"

, что означает, что назначение "window.onload = function (e) ..." перезаписано.

6 голосов
/ 12 июня 2014

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

Обработчик

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

'onload' в документе -> true

5 голосов
/ 26 февраля 2009

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

1 голос
/ 19 мая 2010

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

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...