$(document).ready vs $(window).load vs window.onload

Цей матеріал є вільним перекладом статті: RITURAJ RATAN $(document).ready vs $(window).load vs window.onload

window

$(document).ready

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

$(window).load

Якщо ми говоримо про $(window).load, то код, написаний усередині такої конструкції, почне роботу коли буде готовий весь DOM включаючи зображення. Такий виклик підійде, якщо ми хочемо працювати із зображеннями (розрахунок розмірів зображення). Цей виклик, як і попередній, є jQuery подією. Якщо на нашій сторінці є зображення, спочатку ми дочекаємося завантаження їх усіх, а потім буде викликаний код.

І ще дещо не плутайте подію window load з jQuery методом ajax load.

window.onload

Такий виклик можливий як у HTML так і JS.

Alert “дзвінок після завантаження body” буде викликаний відразу після того, як завантажиться body

Якщо розглянути приклад роботи onload після завантаження зображення, то виглядатиме все як показано нижче