Содержание
События жизненного цикла страницы определяют, когда страница загружена и когда DOM готов. Есть много других событий, связанных с жизненным циклом страницы. Самые полезные — load, resize, scroll.
В них нет конкретных свойств, которые должны быть упомянуты. Обычно слушатель события загрузки соответствует функции JavaScript, которую можно рассматривать как «основную» функцию веб-приложения. Лучше всего начинать все после полной загрузки страницы. Например, в слушателе изменения размера вы получаете новый размер окна или новый размер некоторых HTML-элементов на странице (так как они могли быть изменены и при изменении размера окна), а затем вы что-то делаете (перерисовываете изображение в HTML-холст, который учитывает, например, новый размер холста).
-
-
- load. Это событие происходит, когда объект загружен (включая все его ресурсы: изображения и т. Д.). Это событие очень полезно, когда вы хотите запустить код JS и быть уверенным, что DOM готов (другими словами, убедитесь, что document.getElementById(…) или document.querySelector (…) не вызовет ошибка, поскольку документ не был загружен, а элементы, которые вы ищете, не готовы).
- resize. Событие происходит при изменении размера представления документа. Обычно мы получаем новый размер окна внутри прослушивателя событий, используя var w = window.innerWidth;
- scroll. Событие происходит, когда полоса прокрутки элемента прокручивается. Обычно в слушателе события прокрутки мы используем такие вещи, как:
var max = document.body.scrollHeight — innerHeight;
var percent = (pageYOffset / max);
… чтобы узнать процент прокрутки на странице. -
-
Ожидание загрузки страницы (когда DOM будет готов)
В этом примере мы слушаем события загрузки страницы и изменения ее размера. Когда окно загружается в первый раз или изменяется, мы вызываем функцию обратного вызова resize () . В window.innerWidth и window.innerHeight свойство используется для отображения обновленного размера окна. Также используются screen.width и screen.height для отображения размера экрана.
Вариант 1: использование
<body onload = "init ();">
HTML:
<html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>Пример 1: событие 'load'</title> <style> .loading { border:2px solid #fc8d05; border-radius: 4px; text-align: center; box-shadow: 0 0 10px rgba(0,0,0,0.5); } #pageStatus { border:1px solid red; padding: 2px; color:red; } </style> </head> <body onload='init();'> <div class="loading"> <p>Эта страница использует <code><body onload='init();'></code> в коде JS для выполнения функции init ТОЛЬКО ПРИ ЗАГРУЗКЕ СТРАНИЦЫ!</p> <p>Это важно, поскольку очень часто мы не можем делать важные вещи до того, как DOM будет готов (все элементы HTML созданы и могут управляться из JavaScript).</p> <p>PAGE STATUS: <span id="pageStatus">ЕЩЁ НЕ ЗАГРУЖЕНА!</span></p> </div> <script> function init() { var status = document.querySelector('#pageStatus'); status.innerHTML = 'ЗАГРУЖЕНА'; } </script> </body> </html>
Вариант 2: использование
window.onload = init;
JavaScript для HTML выше будет выглядеть так:
window.onload = init; function init() { var status = document.querySelector('#pageStatus'); status.innerHTML = 'ЗАГРУЖЕНА!'; // Старт кода! // .... }
Определение события изменения размера окна
Пример использования window.onresize = resize; code> в коде JS для выполнения функции изменения размера. Попробуйте изменить размер вашего окна сейчас!
Текущий размер страницы:
Размер экрана: