Уроки JavaScript – виконання коду після повного завантаження DOM

Досить часто при написанні коду JavaScript вам потрібно перевіряти, що DOM повністю завантажений. Це робиться для того, щоб бути впевненим, що всі елементи DOM доступні, і ви можете отримати доступ до цих елементів і вже можете ними маніпулювати.

Всякий раз, коли ви використовуєте JavaScript для маніпулювання вашою сторінкою, вам потрібно дочекатися події готовності документа. Подія готовності документа сигналізує про завантаження DOM сторінки, після якого ви вже можете маніпулювати ним. Зверніть увагу, що подія готовності документа (ready) запускається ДО завантаження всіх картинок та інших медіа-даних, але після повної готовності DOM.

У сьогоднішній статті ми розглянемо основні способи перевірки завантаження DOM за допомогою бібліотеки jQuery, а також за допомогою простого JavaScript.

 

 

Способи перевірки завантаження DOM в jQuery

Бібліотека jQuery в своєму розпорядженні має два методи для перевірки завантаження DOM, виконання коду і прикріплення обробників подій: $(document).ready і $(window).load.

Ці функції перевірки завантаження DOM, які використовуються в jQuery (також називаються jQuery DOM Ready), мають різні види написання.

В основному, коли ви викликаєте функцію jQuery, ви передаєте її об’єкту документа (document). Функція повертає розширену версію об’єкта документа. Цей розширений об’єкт має функцію ready(), в яку ви передаєте функцію(ї) JavaScript. Після готовності DOM, ці функції JavaScript будуть виконані.

Нижче ми розглянемо приклади використання самовиконуваних функцій, які спрацьовують після завантаження елементів сторінки.

 

Варіант №1.

$(document).ready(function() {
  // тут виконуємо jQuery код, коли завантажений DOM
});

 

 

Варіант №2.

$(function() {
  //тут jQuery код
});

 

Ця функція схожа на варіант №1 і виконує буквально одне і те ж.

 

Варіант №3.

jQuery(document).ready(function($) {
  // тут виконуємо jQuery код, коли завантажений DOM
});

 

Використання цього варіанту допомагає запобігти конфліктам з іншими JavaScript платформами. Конфлікти можуть виникати внаслідок того, що багато JavaScript бібліотек/фреймворків використовують одне і те ж ключове слово — $ (символ долара). Використання однаково іменованих функцій бентежить браузер.

Способом запобігання подібним конфліктам можна назвати використання псевдоніму для простору імен (в прикладі вище це jQuery). Також можна використовувати функцію $.noConflict(). Нижче 2 приклади такого використання.

jQuery.noConflict(); // повертаємо змінну $ іншим JavaScript бібліотекам
jQuery(document).ready( function(){
  // тут виконуємо jQuery код, коли завантажений DOM, і без конфліктів
});
// другий варіант – використовуючи спосіб самореалізації функції
jQuery.noConflict();
(function($) {
  // код, в якому використовується аліас $ для jQuery
})(jQuery);

 

 

Варіант №4.

(function($) {
  // код, в якому використовується аліас $ для jQuery
  $(function() {
    // інший код, в якому використовується аліас $ для jQuery
  });
})(jQuery);
// далі йде інший код, в якому використовується аліас $ для інших бібліотек

 

Цей спосіб також допоможе вам запобігти конфліктам з іншими бібліотеками JavaScript.

 

 

Варіант №5.

Іноді вам потрібно маніпулювати картинками за допомогою JavaScript, але, нагадаємо, що $(document).ready() не дозволяє це робити, оскільки функція чекає завантаження DOM, але не інших ресурсів. В цьому випадку вам потрібно використовувати іншу ініціалізацію jQuery. Нижче приклад такого коду:

$(window).load(function(){
  // ініціалізація після того, як завантажилися зображення на сторінці
  // тепер сторінка повністю завантажена, включаючи всі фрейми, об'єкти і картинки
});

 

Подія ready запускається, коли DOM повністю завантажений, а подія load запускається після завантаження не тільки DOM, а й усіх ресурсів.

Ви також можете використовувати подію завантаження документа в такий спосіб:

$(window).on("load", function(){
  // ініціалізація після того, як сторінка повністю завантажилася (включаючи всі фрейми, об'єкти і картинки)
});

 

jQuery дозволяє зареєструвати кілька слухачів готовності (ready) документів. Просто викличте $(document).ready() необхідну кількість разів (в основному так і робиться, якщо на сторінці завантажується декілька файлів скриптів). Код цих скриптів виконується в тому порядку, в якому вони були завантажені.

 

 

Використання простого JavaScript

Якщо ви не використовуєте в своїх скриптах бібліотеки або фреймворки (наприклад, jQuery), ви можете використовувати простий JavaScript. Ця імплементація працює приблизно в 98% браузерів (всі сучасні браузери та IE9+):

document.addEventListener("DOMContentLoaded", function(event){
  // додаємо обробник, коли DOM повністю завантажений
  // тут код
});

 

Для більш старих браузерів ви можете використовувати наступний підхід: якщо ви помістите скрипт в кінець сторінки (він буде останнім тегом script перед закриваючим тегом <body>), DOM буде готовий і його статус readyState зміниться на complete. Після цього статусу ви можете виконувати код. Нижче приклад такої реалізації:

document.onreadystatechange = function() {
  if (document.readyState == "complete") {
    // документ повністю готовий, можемо виконувати JavaScript код
  }
}

 

 

 

 

Короткий підсумок

Ось ми і розглянули всі варіанти, в яких ми чекаємо повного завантаження DOM, щоб безпечно виконувати свій JavaScript код.

Якщо вам потрібно виконувати код після завантаження DOM і ви використовуєте jQuery в своєму проекті, ви можете використовувати функції ready документа або load об’єкта вікна.

Якщо вам потрібен простий JavaScript, тоді використовуйте подію DOMContentLoaded.

 

Tags: JavaScript

Recent Posts

Зигмунд Фрейд

  Кожен говорить про те, чого йому не вистачає. Той, кому не вистачає сексу, говорить… Read More

03/12/2020

Правильний вибір якісних гральних карт

Відомо, що перші гральні карти були винайдені династією Тан в Китаї ще в 9 столітті.… Read More

15/11/2020

Як знайти нову роботу – кращі тактики

Давно минули ті часи, коли люди отримували роботу одразу ж після закінчення навчання, і залишалися… Read More

13/11/2020

Ліцензування Zoom в Україні – тарифи і ціни

Самоізоляція 2020 року поставила людей в досить суворі умови – незважаючи на вимушені карантинні заходи,… Read More

10/11/2020

Десятка найбільш хокейних міст України

Чи є в Україні хокей? Багато шанувальників цього виду спорту асоціюють гру з шайбою на… Read More

09/11/2020

Переваги б/в ноутбуків та критерії вибору техніки

Сучасний ринок комп'ютерної техніки постійно оновлюється, щорічно пропонуючи користувачам нові і більш потужні моделі ПК… Read More

03/11/2020