В 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>
Комментарии (0)
Пока еще не было комментариев ✍️