Помощь Joomla



Подгрузка Iframe C Помощью Javascript

Загрузка документа: DOMContentLoaded, load, beforeunload, unload  Июнь 12, 2019 – 19:37

Процесс загрузки HTML-документа, условно, состоит из трёх стадий:

  • DOMContentLoaded – браузер полностью загрузил HTML, и построил DOM-дерево.
  • load – браузер загрузил все ресурсы.
  • beforeunload/unload – уход со страницы.

Все эти стадии очень важны. На каждую можно повесить обработчик, чтобы совершить полезные действия:

  • DOMContentLoaded – означает, что все DOM-элементы разметки уже созданы, можно их искать, вешать обработчики, создавать интерфейс, но при этом, возможно, ещё не догрузились какие-то картинки или стили.
  • load – страница и все ресурсы загружены, используется редко, обычно нет нужды ждать этого момента.
  • beforeunload/unload – можно проверить, сохранил ли посетитель изменения, уточнить, действительно ли он хочет покинуть страницу.

Далее мы рассмотрим важные детали этих событий.

Событие DOMContentLoaded происходит на document и поддерживается во всех браузерах, кроме IE8-. Про поддержку аналогичного функционала в старых IE мы поговорим в конце главы.

Обработчик на него вешается только через addEventListener:

document.addEventListener("DOMContentLoaded", ready);

Пример:

function ready { alert( 'DOM готов' ); alert( "Размеры картинки: " + img.offsetWidth + "x" + img.offsetHeight ); } document.addEventListener("DOMContentLoaded", ready);

В примере выше размеры обработчик DOMContentLoaded сработает сразу после загрузки документа, не дожидаясь получения картинки.

Поэтому на момент вывода alert и сама картинка будет невидна и её размеры – неизвестны (кроме случая, когда картинка взята из кеша браузера).

В своей сути, событие onDOMContentLoaded – простое, как пробка. Полностью создано DOM-дерево – и вот событие. Но с ним связан ряд существенных тонкостей.

Если в документе есть теги , то браузер обязан их выполнить до того, как построит DOM. Поэтому событие DOMContentLoaded ждёт загрузки и выполнения таких скриптов.

Source: learn.javascript.ru

Похожие публикации:

  1. Подключение Css Файла с Помощью Javascript
  2. Меню Помощью Javascript
  3. Css Изменения с Помощью Javascript
  4. Анимация Помощью Javascript
  5. Кнопка Помощью Javascript