Часто возникает необходимость выполнить некоторый код в момент когда страница загружена.
Для этих целей служит $(document).ready() в библиотеке JQuery, однако если необходимо обойтись чистым JavaScript.
В JavaScript есть несколько событий которые возникают при загрузке страницы это:
DOMContentLoaded– браузер полностью загрузил HTML и построил DOM-дерево.load– браузер загрузил все ресурсы.beforeunload/unload– уход со страницы.
Событие DOMContentLoaded
Событие возникает когда броузер полностью загрузил HTML и построил DOM-дерево, что означает, что все DOM-элементы разметки уже созданы, можно их искать, вешать обработчики, создавать интерфейс, но при этом, возможно, ещё не догрузились какие-то картинки или стили.
Например:
|
1 2 3 4 5 6 7 8 9 10 |
<script> function ready() { alert( 'DOM готов' ); alert( "Размеры картинки: " + img.offsetWidth + "x" + img.offsetHeight ); } document.addEventListener("DOMContentLoaded", ready); </script> <img id="img" src="https://js.cx/clipart/yozhik.jpg?speed=1"> |
В примере выше обработчик DOMContentLoaded сработает сразу после загрузки документа, не дожидаясь получения картинки.
Поэтому на момент вывода alert и сама картинка будет невидна и её размеры – неизвестны (кроме случая, когда картинка взята из кеша браузера).
Событие DOMContentLoaded происходит на document и поддерживается во всех браузерах, кроме IE8-. Заметим, что альтернативой событию onDOMContentLoaded является вызов функции init из скрипта в самом конце BODY.
Если в документе есть теги <script>, то браузер обязан их выполнить до того, как построит DOM. Поэтому событие DOMContentLoaded ждёт загрузки и выполнения таких скриптов.
Исключением являются скрипты с атрибутами async и defer, которые подгружаются асинхронно.
Побочный эффект: если на странице подключается скрипт с внешнего ресурса (к примеру, реклама), и он тормозит, то событие DOMContentLoaded и связанные с ним действия могут сильно задержаться.
Современные системы рекламы используют атрибут async, либо вставляют скрипты через DOM: document.createElement('script')..., что работает так же как async: такой скрипт выполняется полностью независимо от страницы и от других скриптов – сам ничего не ждёт и ничего не блокирует.
Внешние стили никак не влияют на событие DOMContentLoaded. Но есть один нюанс.
Если после стиля идёт скрипт, то этот скрипт обязан дождаться, пока стиль загрузится:
|
1 2 3 4 |
<link type="text/css" rel="stylesheet" href="style.css"> <script> // сработает после загрузки style.css </script> |
Такое поведение прописано в стандарте. Его причина – скрипт может захотеть получить информацию со страницы, зависящую от стилей, например, ширину элемента, и поэтому обязан дождаться загрузки style.css.
Побочный эффект – так как событие DOMContentLoaded будет ждать выполнения скрипта, то оно подождёт и загрузки стилей, которые идут перед <script>.
Firefox/Chrome/Opera автозаполняют формы по DOMContentLoaded.
Это означает, что если на странице есть форма для ввода логина-пароля, то браузер введёт в неё запомненные значения только по DOMContentLoaded.
Побочный эффект: если DOMContentLoaded ожидает множества скриптов и стилей, то автозаполнение не сработает до полной их загрузки.
Конечно, это довод в пользу того, чтобы не задерживать DOMContentLoaded, в частности – использовать у скриптов атрибуты async и defer.
document.ondomcontentready
document.ondomcontentready / document.ondomcontentloaded – новые событие, которое запускается при загрузке DOM документа (что может занять некоторое время до загрузки изображений и т. д.); опять же, немного по своей работе в Internet Explorer и в других браузерах.
window.onload
Событие onload на window срабатывает, когда загружается вся страница, включая ресурсы на ней – стили, картинки, ифреймы и т.п.
Пример ниже выведет alert лишь после полной загрузки окна, включая IFRAME и картинку:
|
1 2 3 4 5 6 7 |
<script> window.onload = function() { alert( 'Документ и все ресурсы загружены' ); }; </script> <iframe src="https://example.com/" style="height:60px"></iframe> <img src="https://js.cx/clipart/yozhik.jpg?speed=1"> |
Это событие встроенное в JavaScript, но имеет множество тонкостей работы в зависимости от типа и версии браузера.
Может быть только одна такая функция!!! Но есть трюк:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
function addLoadEvent(func) { var oldonload = window.onload; if (typeof window.onload != 'function') { window.onload = func; } else { window.onload = function() { if (oldonload) { oldonload(); } func(); } } } // Example use: addLoadEvent(nameOfSomeFunctionToRunOnPageLoad); addLoadEvent(function() { /* More code to run on page load */ }); |
Либо вариант использования множества обработчиков
|
1 2 3 4 5 6 7 |
window.addEventListener('load', function () { alert('Hello!') }) window.addEventListener('load', function () { alert('Bye!') }) |
window.onunload
Когда человек уходит со страницы или закрывает окно, на window срабатывает событие unload. В нём можно сделать что-то, не требующее ожидания, например, закрыть вспомогательные popup-окна, но отменить сам переход нельзя.
Это позволяет другое событие – onbeforeunload, которое поэтому используется гораздо чаще.
Это событие почти не используется, как правило, оно бесполезно – мало что можно сделать, зная, что окно браузера прямо сейчас закроется.
window.onbeforeunload
Если посетитель инициировал переход на другую страницу или нажал «закрыть окно», то обработчик onbeforeunload может приостановить процесс и спросить подтверждение.
Для этого ему нужно вернуть строку. По историческим причинам некоторые браузеры покажут ее, но большинство – стандартное сообщение.
|
1 2 3 |
window.onbeforeunload = function() { return "Данные не сохранены. Точно перейти?"; }; |
Это де-факто стандарт для того, чтобы проверить, сохранил ли посетитель данные, действительно ли он хочет покинуть страницу.
JQuery ready & load
$ (document) .ready () – событие jQuery. Метод JQuery $ (document) .ready () вызывается, как только DOM готов (что означает, что браузер проанализировал HTML и построил дерево DOM). Это позволяет запускать код, как только документ готов к работе.
Два синтаксиса:
|
1 2 3 |
$( document ).ready(function() { console.log( "ready!" ); }); |
более короткий вариант:
|
1 2 3 |
$(function() { console.log( "ready!" ); }); |
Основные пункты для применения $ (document) .ready ():
- Он не будет ждать загрузки изображений
- Используется для выполнения JavaScript, когда DOM полностью загружен. Поместите обработчики событий здесь.
- Может использоваться несколько раз.
- Замените $ с помощью jQuery, если вы получите ошибку «$ is not defined».
- Не используется, если вы хотите управлять изображениями. Вместо этого используйте $ (window) .load ().
window.onload () – это встроенная функция JavaScript. Событие window.onload () запускается, когда загружается все содержимое вашей страницы, включая DOM (модель объекта документа), баннерные объявления и изображения. Другое различие между ними состоит в том, что, хотя у нас может быть более одной функции $ (document) .ready (), мы можем иметь только одну функцию onload.
$(document).on('ready', handler) связывает обработчик с событием ready в jQuery. Этот обработчик вызывается когда DOM дерево построено. Но при этом различные ресурсы такие как изображения могут отсутствовать. Такое событие никогда не будет вызвано в том случае если в момент связывания событие уже произошло. Так как jQuery использует DOMContentLoaded для реализации этого события и эмитирует его в том случае если броузер его не поддерживает.
$(document).on('load', handler) это событие возникает тогда когда все ресурсы уже загружены с сервера, в том числе и изображения.
$(document).ready(handler) на самом деле это promise. Обработчик вызывается сразу же если документ уже готов или откладывается до возникновения события.
До jQuery 1.8, $(document).load(handler) существовал как синоним для $(document).on('load',handler).