Когда возникает событие onLoad?

Question

[Алексей Струков]

Подскажите плиз, когда именно срабатывает событие onLoad?
В описании события говорится что это происходит когда страница полностью загружена, но что конкретно понимается под словом страница?
Оно сгенерируется когда браузер считает код до закрывающего тега html/body или когда он полностью прочитает абсолютно все теги в файле?

Answer 1

[ThunderCat]

когда загружены все элементы, включая картинки, скрипты и цссы.

Comments

[Алексей Струков]

Все элементы страницы, а не документа. В этом и есть двусмысленность толкования. Тем более этот атрибут применяется к тегу body, и логично предположить, что как только закрывающий тег будет прочитан то сгенерируется это событие. Сейчас нет компьютера под рукой чтобы протестировать самому и узнать на практике.

[ThunderCat]

Алексей Струков: для события загрузки всех элементов DOM есть DOMContentLoaded, это НЕ ТО ЖЕ САМОЕ, и тут оно срабатывает именно как вы говорите, т.е. после загрузки последнего закрывающего тега. И вроде как оно не во всех браузерах поддерживается.

[Outoverlay]

Алексей Струков: onload применяется как к window, так и к любому элементу на странице. То есть, если применить это к одной картинке, к примеру То скрипт исполниться как только загрузится эта картинка, если использовать DOMContentLoaded, то скрипт исполнится, как только загрузится элемент, но не картинка.

[Алексей Струков]

ThunderCat: значит именно при прочтении браузером всех тегов файла страницы, включая те, что идут после закрывающего тега html?

[ThunderCat]

Алексей Струков: о различиях в прочтении: страница есть частный случай документа - т.е. это документ прочтенный браузером. Onload Применяется к тегам body, frameset. И собсно по этому на картинку его не повесишь.

[Алексей Струков]

Outoverlay: ну не совсем к любому. Вот список поддерживаемых элементов:
, , , , , ,

[Алексей Струков]

Алексей Струков: не позволяет сайт вставить теги, там в общем body, img, frame и еще несколько

[ThunderCat]

Алексей Струков: )) да, теги они такие )

[Outoverlay]

Алексей Струков: как бэ можно использовать javascript. И там есть window, и еще есть. По моему можно использовать делегирование

[Outoverlay]

Алексей Струков: вообще ко всем. Ну как минимум, которые используются на практике, только смысла не имеет.

[Алексей Струков]

ThunderCat: ну дело в том что на картинку то как раз повесить можно.
И событие сработает когда картинка загрузится. Следуя этой логике я предположил что если повесить на элемент body, то сработает оно когда парсер браузера дойдет до закрывающего тега body. Document.onLoad это помоему полный аналог аттрибута на теге body, только позволяет не захламлять html аттрибутами и инлайновым js

[Алексей Струков]

Outoverlay: проверил по MDN - действительно на все элементы вешается.
Тогда тем более непонятно отличное поведение аттрибута на img от такового на body

Answer 2

[Дмитрий Беляев]

событие DOMContentLoaded может быть использовано только на объекте document, возникает когда полностью построено dom дерево документа

событие load может быть использовано на объектах window, script, img, iframe, video, audio и некоторых других, возникает когда полностью загружен ресурс

объект window считается полностью загруженным, когда загрузится html документ + все зависимости прописанные в нем (картинки, скрипты, стили, шрифты и т.д.) в том числе зависимости прописанные в стилях, но тут есть исключение, это событие не ждет загрузки скриптов с атрибутом async, элементов добавленных через dom-api, элементов видео и аудио

атрибут onload тега body является аналогом события load объекта window

событие DOMContentLoaded у document как правило происходит раньше события load у window

Comments

[Алексей Струков]

Тогда получается что практика засовывать скрипты в конец документа не так уж и эффективна. Но это рекомендация Гугл, так что видимо придется самому тестировать для получения стопроцентной уверенности((

[Дмитрий Беляев]

Алексей Струков: такая практика появилась по историческим причинам, браузер не продолжает рендерить страницу, пока не выполнит скрипт, а чтоб выполнить он должен его полностью загрузить
Такое поведение происходит из-за поддержки устаревшего метода document.write

[Алексей Струков]

Дмитрий Беляев: насчет правил загрузки скриптов это понятно все. Дело в том что рекомендация засовывать скрипт перед закрывающим тегом боди подразумевает что это делается для того, чтобы скрипт был прочитан до того момента как произойдет событие onload. Если это событие возникает только после обработки всего файла, то не имеет значения где лежит скрипт - внутри боди или снаружи в самом конце. Как document.write кстати модифицирует сам html? Я читал давно про этот метод, но мне он показался бесполезным и непонятным и я его благополучно забыл)

[Дмитрий Беляев]

Алексей Струков: document.write висит из эпохи веб1.0 (статичных сайтов), его назначение вывести html-строку в поток рендера браузера.
Перед событием DOMContentLoaded браузер вызывает document.close() завершающий поток рендера. Если после этого вызвать document.write поток рендера перезапустится с новым документом. Ради эксперемента на любом сайте откройте консоль и выведете что-либо через этот метод.
Именно из-за потенциальной возможности использовать document.write в скриптах браузер останавливает рендеринг до выполнения скрипта (а вдруг скрипт что допишет в поток). А раз поток рендера останавливается, страница не отрисовывается и пользователь ее не видит, пока скрипт не отработает.

[Алексей Струков]

Дмитрий Беляев: у нас диалог идет как будто о разных вещах)
Я спрашиваю про то, что понимается под словами "загружен документ полностью", а Вы мне рассказываете про базовые правила загрузки внешних ресурсов браузером)
Уже не суть, я протестировал поведение через хром девелопер и посмотрел последовательность загрузки скриптов. Все происходит как Вы говорили, но с маленьким нюансом. Onload вызывается когда все теги в файле полностью прочитаны браузером. Если внизу будет лежать скрипт, который например меняет цвет фона страницы, то далее следует пересчет стилей и генерируется событие domcontentloaded, потом идет построение layout и после этого генерируется событие paint.