JS/jQuery

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

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

1

jQuery document ready

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

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

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

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

DOMContentLoaded

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

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

window.onload

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

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

Вариант на jQuery:

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

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

<!DOCTYPE HTML>
<html>
<head>
    ...
</head>
<body onload="console.log('Готов!');">
    ...
</body>
</html>
19 февраля 2019
Применение масок ввода у полей форм значительно упрощает их использование, уменьшает количество ошибок и приводит...