Загрузка документа document ready, DOMContentLoaded и onload

В JS, манипуляции с тегами рекомендуется выполнять после полной загрузки DOM-дерева. Для этого есть события DOMContentLoaded и onload, в jQuery функция ready, рассмотрим их применение.

Сработает как только браузер полностью загрузит HTML и построит DOM-дерево.

$(document).ready(function(){
	console.log('Готов!');
});
JS

Сокращенный аналог

$(function(){
	console.log('Готов!');
});
JS

Тоже самое что и document.ready.

document.addEventListener('DOMContentLoaded', function(){
	console.log('Готов!');
});
JS

В отличии от DOMContentLoaded и ready, событие onload срабатывает после полной загрузки всех ресурсов (например, изображения).

window.onload = function(){
	console.log('Готов!');
};
JS

Вариант на jQuery

$(window).on('load', function(){
	console.log('Готов!');
});
JS

Также событие можно задать атрибутом onload у тега <body>.

<!DOCTYPE HTML>
<html>
<head>
	...
</head>
<body onload="console.log('Готов!');">
	...
</body>
</html>
HTML
19.02.2019, обновлено 16.09.2019
23658
Следующая запись Селекторы JQuery

Комментарии 1

, чтобы добавить комментарий.

Другие публикации

JS-скрипт для подтверждения закрытия страницы
Если установить обработчик события beforeunload, который возвращает true, то при попытки пользователем перезагрузить...
7058
+4
Ускорение загрузки Яндекс Карт
Несколько рекомендаций как увеличить скорость загрузки API Яндекс.Карт 2.0.
18237
+9
Примеры отправки AJAX JQuery
AJAX позволяет отправить и получить данные без перезагрузки страницы. Например, делать проверку форм, подгружать контент и т.д. А функции JQuery значительно упрощают работу.
129339
+19
Ускорение загрузки изображений и скриптов
Современные браузеры имеют поддержку предварительной загрузки ресурсов, указав в head страницы теги link с их адресами...
10164
+3
Манипуляции с элементами jQuery
Сборник методов jQuery для управления элементами DOM.
8162
+3
Стилизация Checkbox
Несколько примеров как изменить внешний вид чекбоксов с помощью CSS, изображений и немного JS.
38580
+4