0

Код, для примера:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <h1>Документ</h1>
<script>
    document.onload = function(){console.log('Документ загружен');}
</script>
</body>
</html>

Если сохранить этот код в html файл, а потом открыть его в браузере и посмотреть в DevTools, то там ничего не будет. Я уже нагуглил, что вместо этого можно использовать обработчик window.onload и что лучше использовать метод addEventListener.

Вопросы:

  1. Почему функция, присвоенная document.onload не срабатывает? В понимании разработчиков браузеров, документ страницы загружается бесконечно?
  2. Зачем нужен обработчик document.onload, если он не работает?
  3. Насколько правильно вешать функцию на обработчик события window.onload или window.addEventListener('load',function(){...})? Есть ли какие-нибудь альтернативы или более правильный подход выполнить действия, когда все ресурсы на странице загрузятся?

1 ответ 1

2

Почему функция, присвоенная document.onload не срабатывает? В понимании разработчиков браузеров, документ страницы загружается бесконечно?

Потому что не document, а window. У документа есть событие DOMContentLoaded.

Зачем нужен обработчик document.onload, если он не работает?

Его нет.

Насколько правильно вешать функцию на обработчик события window.onload или window.addEventListener('load',function(){...})? Есть ли какие-нибудь альтернативы или более правильный подход выполнить действия, когда все ресурсы на странице загрузятся?

Через addEventListener более современно. И лучше. Почему? Потому что с его помощью можно повесить несколько обработчиков (хотя это и мало когда нужно), а через onload можно только одну функцию прицепить.

DOMContentLoaded - построено дерево DOM, load (на window, повторюсь) - загружена вся страница, включая все изображения и подобные ресурсы. Выбирайте исходя из своих потребностей.

Можно еще добавить, что если подключается внешний скрипт (<script src="...">), то можно просто добавить атрибут defer: <script src="..." defer>, что сработает аналогично DOMContentLoaded.

2
  • Спасибо, не знал про это. Жаль браузер не предупреждает ошибкой, что такого обработчика у document нет. Про DOMContentLoaded знал, но мне нужно посчитать сумму некоторых сторон картинок, поэтому, в данном случае, он мне не подходит, как я понимаю.
    – Drovosek
    31 мая 2019 в 21:45
  • @Drovosek скорее всего да. А вообще можно и отдельно на картинки вешать обработчик load. Но там уже сами смотрите, как удобнее, на каждую картинку в отдельности или на window в целом. 1 июн 2019 в 8:49

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.