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

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

1

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

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

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

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

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

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

В отличии от 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
47062
Следующая запись Селекторы JQuery

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

Александр Максимов Александр Максимов
7 февраля 2022 в 16:09
хм, не знал что можно вместо:
$(document).ready(function(){
	console.log('Готов!');
});

использовать так:
$(function(){
	console.log('Готов!');
});

Никаких негативных последствий от подобного не будет? код будет срабатывать?

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

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

JS-скрипт для подтверждения закрытия страницы
Если установить обработчик события beforeunload, который возвращает true, то при попытки пользователем перезагрузить...
15607
+2
Ускорение загрузки Яндекс Карт
Несколько рекомендаций как увеличить скорость загрузки API Яндекс.Карт 2.0.
27387
+12
Примеры отправки AJAX JQuery
AJAX позволяет отправить и получить данные без перезагрузки страницы. Например, делать проверку форм, подгружать контент и т.д. А функции JQuery значительно упрощают работу.
273493
+36
Ускорение загрузки изображений и скриптов
Современные браузеры имеют поддержку предварительной загрузки ресурсов, указав в head страницы теги link с их адресами...
16524
+3
Манипуляции с элементами jQuery
Сборник методов jQuery для управления элементами DOM.
22385
+5
Стилизация Checkbox
Несколько примеров как изменить внешний вид чекбоксов с помощью CSS, изображений и немного JS.
73948
+3