В JavaScript манипуляции с элементами DOM-дерева рекомендуется выполнять после полной его загрузки. Для этого есть события DOMContentLoaded и onload, в jQuery функция ready().
jQuery document ready
Сработает как только браузер полностью загрузит HTML и построит DOM-дерево:
$(document).ready(function(){
// код для выполнения после загрузки DOM
console.log("Работаю!");
});
Сокращенный аналог:
$(function(){
console.log('Работаю!');
});
Также можно вызывать именованную функцию в $(document).ready():
function readyFn( jQuery ) {
console.log('Работаю!');
}
$( document ).ready( readyFn );
Использование $(document).ready() и псевдонима $ при написании безотказного кода jQuery не полагаясь на глобальные псевдонимы:
jQuery(function($) {
console.log('Работаю!');
});
DOMContentLoaded
Тоже самое что и document.ready():
document.addEventListener('DOMContentLoaded', function(){
console.log('Работаю!');
});
window.onload
В отличии от DOMContentLoaded и ready, событие onload срабатывает после полной загрузки всех ресурсов (изображения, скрипты, CSS, фреймы и тд):
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>