События жизненного цикла страницы load, resize, scroll

5 (100%) 4 vote[s]

События жизненного цикла страницы определяют, когда страница загружена и когда 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>&lt;body onload='init();'&gt;</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 = 'ЗАГРУЖЕНА!';
  
  // Старт кода!
  // ....
}

Определение события изменения размера окна

Пример события 'resize'

Пример использования window.onresize = resize; в коде JS для выполнения функции изменения размера. Попробуйте изменить размер вашего окна сейчас!

Текущий размер страницы:

Размер экрана:

HTML:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Пример события 'resize'</title>
<style>
.sz {
border:2px solid #fc8d05;
border-radius: 4px;
text-align: center;
box-shadow: 0 0 10px rgba(0,0,0,0.5);
}
#pageSize, #screenSize {
  border:1px solid red;
  padding: 2px;
  color:red;
}
</style>
</head>
<body>
<div class="sz">
  <p>Пример использования <code> window.onresize = resize; </ code> в коде JS для выполнения функции изменения размера. <span style="font-size: 26px;color:green;">Попробуйте изменить размер вашего окна сейчас!</span></p>
 
  <p>Текущий размер страницы: <span id="pageSize"></span></p>
  <p>Размер экрана: <span id="screenSize"></span></p>
</div>
<script>
window.onload = resize;
window.onresize = resize;

function resize(evt) {
  console.log("resize");
  var pageSizeSpan = document.querySelector('#pageSize');
  pageSizeSpan.innerHTML = "Width: " + window.innerWidth + " Height: " + window.innerHeight;
  
 // screen size
var screenSizeSpan = document.querySelector('#screenSize');
  screenSizeSpan.innerHTML = "Width: " + screen.width + " Height: " + screen.height;
  
}
</script>
</body>
</html>

Прокрутка страницы

Эта страница использует <body onload='init();'> в коде JS для выполнения функции init ТОЛЬКО ПРИ ЗАГРУЗКЕ СТРАНИЦЫ!

Это важно, поскольку очень часто мы не можем делать важные вещи до того, как DOM будет готов (все элементы HTML созданы и могут управляться из JavaScript).

PAGE STATUS: ЕЩЁ НЕ ЗАГРУЖЕНА!

Пример события «прокрутка»

Индикатор прокрутки вы можете видеть на экране вверху справа, показывает процент прокрутки.

HTML:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Пример события «прокрутка»</title>
<style>
.pr {
border:2px solid #fc8d05;
border-radius: 4px;
text-align: center;
box-shadow: 0 0 10px rgba(0,0,0,0.5);
}
.progress {
  border: 1px solid #010947;
  width: 15%;
  position: fixed;
  top: 50px; right: 0px;
box-shadow: 0 0 10px rgba(0,0,0,0.5);
z-index: 9999;
}

.progress > div {
  height: 22px;
  background: #fc8f0a;
  width: 0%;
  font-size:18px;
}

#text {
  margin-top:50px;
}
body {
  height: 965px;
}
</style>
</head>
  <body>
<div class="pr">
<div class="progress">
  <div></div>
    </div>
    <p id="text">Индикатор прокрутки вы можете видеть на экране вверху справа, показывает процент прокрутки.</p>
</div>
<script>
window.onload = init;

var progressBar;

function init() {
  progressBar = document.querySelector(".progress div");

  window.addEventListener("scroll", function() {
      var max = document.body.scrollHeight - window.innerHeight;
      var percent = (window.pageYOffset / max) * 100;
      progressBar.style.width = percent + "%";
  });
}
</script>
  </body>
</html>

Больше по теме «размеры и прокрутка страницы» читайте здесь или здесь.

Читайте еще по теме:

Подписаться
Уведомление о
guest
0 комментариев
Inline Feedbacks
View all comments
Просмотры: 1115

Hosting Ukraine

FolkWindows

Случайный выбор

Популярные записи