Уроки 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.

Теги: JavaScript