Как заменить метод jQuery Ready() помощью простого JavaScript
Метод ready был реализован в Jquery для выполнения кода, когда DOM полностью загружен. Так как он выполняет данную функцию, когда все элементы DOM доступны, вы можете быть уверены, что когда пытаетесь получить доступ или манипулировать элементами, то они точно будут работать.
ДО JQuery 3.0 типичное использование анонимной функции выглядит следующим образом:
$(document).ready(function() {
// .....
});
Изменения в Query 3.0 ready()
До выхода версии 3, было несколько способов, которыми вы могли бы вызвать ready метод:
- на элемент документа: $(document).ready(handler);
- на пустой элемент: $().ready(handler);
- или непосредственно (т.е. не на конкретный элемент): $(handler);
В JQuery 3.0, все другие методы синтаксиса, кроме $(handler); являются устаревшими. Официальное оправдание:
Это потому, что выбор не влияет на поведение метода Ready (), который является неэффективным и может привести к неправильным предположениям о поведении метода.Разница между событиями Ready и Load
Ready событие запускается, когда DOM будет полностью загружен и уже после этого обращается к элементам безопасно. Событие load, с другой стороны, начинает работать после того, как DOM и все активы были загружены.
Событие load можно использовать следующим образом:
$(window).on("load", function(){
// Обработчик, когда все активы (включая изображения) загружаются
});
Он ждет, пока не только DOM будет готов к взаимодействию, но и изображения, которые должны полностью загрузится (это может занять время, в зависимости от размеров изображений).
Для обычных DOM манипуляций вам обычно не нужно load событие, но это может быть правильный выбор, если вы хотите, например, показать загрузку (прогресс бар).
Вам, наверное, не нужно jQuery.ready()
Ready метод гарантирует, что код выполняется только тогда, когда все элементы DOM безопасны для манипуляций. Но что это значит? Когда вы запускаете выполнение кода JavaScript внутри <head> HTML документа, то можно убедиться, что код выполняется, когда браузер загрузил все следующие элементы (например, элемент) тоже:
<html>
<head>
<meta charset="utf-8">
<title>.ready()</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script>
$(function(){
var length = $("p").length;
// Следующим будет 1 в консоли, поскольку в этом пункте существует.
// Это свидетельство того, что этот метод вызывается только тогда, когда DOM полностью загружен
console.log(length);
});
</script>
</head>
<body>
<p>Здесь контент сайта</p>
</body>
</html>
А вот когда идет выполнение JavaScript в последнюю очередь внутри <body>, то вам не нужно оборачивать в ready() , так как все элементы, которыми вы могли бы попытаться манипулировать, уже загружены:
<html>
<head>
<meta charset="utf-8">
<title>.ready()</title>
</head>
<body>
<p>I'm the content of this website</p>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script>
var length = $("p").length;
// Следующим будет 1 в консоли, поскольку в этом пункте существует.
console.log(length);
</script>
</body>
</html>
Простая JavaScript ready() альтернатива
Для современных браузеров и IE9 и выше, вы можете прослушивать событие DOMContentLoaded:
document.addEventListener("DOMContentLoaded", function(){
// Обработчик, когда DOM будет полностью загружен
});
Но, обратите внимание, что обратный вызов не будет выполнен, если событие уже запущено. Чтобы убедиться, что этот метод всегда работает, jQuery проверяет readyState документа если все, то немедленно выполняет обратный вызов:
var callback = function(){
// Обработчик, когда DOM будет полностью загружен
};
if (
document.readyState === "complete" ||
(document.readyState !== "loading" && !document.documentElement.doScroll)
) {
callback();
} else {
document.addEventListener("DOMContentLoaded", callback);
}
Это решение, кстати, уже реализовано в библиотеке domReady.
Более старые версии Internet Explorer
Для версий IE меньше или равно 8, вы могли бы использовать событие onreadystatechange для определения readyState документа:
document.attachEvent("onreadystatechange", function(){
// проверьте, если DOM будет полностью загружен
if(document.readyState === "complete"){
// удалить слушателя
document.detachEvent("onreadystatechange", arguments.callee);
// Фактический обработчик...
}
});
В качестве альтернативы можно использовать событие загрузки, как JQuery делает, так как это будет работать в любом браузере. Это также приводит к задержке времени, так как она будет ждать, пока все элементы будут загружены. Обратите внимание, что вы также должны проверить readyState в этом случае, как описано выше, чтобы убедиться, что обратный вызов по-прежнему будет выполняться, даже если событие уже произошло.
Вывод
Если вы ищете простую альтернативу JavaScript для ready метода, то вы можете использовать DOMContentLoaded событию. Если ваши системные требования включают в себя IE <9, то вы можете использовать onreadystatechange событие.
Если вы используете JQuery в вашем проекте вы можете смело приступать с помощью встроенной функции готовности, но помните, чтобы избежать использования ( не рекомендуется) ready() метод на элементы (например , $(document).ready() ), как указано ранее.
И, наконец, не стоит забывать, что во многих ситуациях вам не нужно какое-либо из этих решений - просто поставьте код JavaScript перед закрывающим </body> тега, и вы можете быть уверены, что он будет выполнен по окончании загрузки DOM!
Автор этого материала - я - Пахолков Юрий. Я оказываю услуги по написанию программ на языках Java, C++, C# (а также консультирую по ним) и созданию сайтов. Работаю с сайтами на CMS OpenCart, WordPress, ModX и самописными. Кроме этого, работаю напрямую с JavaScript, PHP, CSS, HTML - то есть могу доработать ваш сайт или помочь с веб-программированием. Пишите сюда.
Отправляя сообщение я подтверждаю, что ознакомлен и согласен с политикой конфиденциальности данного сайта.
Программы на заказ
Отзывы
Контакты