Каковы различия между
$(document).ready(function(){
//my code here
});
и
$(window).load(function(){
//my code here
});
И я хочу убедиться, что:
$(document).ready(function(){
})
и
$(function(){
});
и
jQuery(document).ready(function(){
});
совпадают.
Можете ли вы рассказать мне, какие различия и сходства между ними?
$(document).ready(function() {
// executes when HTML-Document is loaded and DOM is ready
console.log("document is ready");
});
$(window).load(function() {
// executes when complete page is fully loaded, including all frames, objects and images
console.log("window is loaded");
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> document.ready - событие jQuery, оно выполняется, когда DOM готов, например. все элементы должны быть найдены/использованы, но не обязательно все содержимое. window.onload срабатывает позже (или в то же время в случае худших/неудачных случаев) при загрузке изображений и т.д. Итак, если вы используете размеры изображения, например, вы часто хотите использовать это.
Также прочитайте связанный с этим вопрос:
Разница между функциями $(window).load() и $(document).ready()
Хотя JavaScript предоставляет событие
loadдля выполнения кода, когда страница отображается, это событие не запускается до тех пор, пока все активы такие как изображения, были полностью получены. В большинстве случаев script может быть запущен, как только иерархия DOM будет полностью построен. Передатчик, переданный в.ready(), гарантированно будет выполняется после того, как DOM готов, так что это, как правило, лучшее место для присоединить все другие обработчики событий и запустить другой код jQuery. Когда используешь скрипты, которые полагаются на ценность свойств стиля CSS, важно ссылаться на внешние таблицы стилей или внедрять элементы стиля перед ссылаясь на сценарии.В случаях, когда код использует загруженные активы (например, если размеры изображения требуются), код должен быть помещен в вместо
load.
Ответ на второй вопрос -
Нет, они идентичны, если вы не используете jQuery в режиме без конфликтов.
Эта три функции одинаковы.
$(document).ready(function(){
})
и
$(function(){
});
и
jQuery(document).ready(function(){
});
здесь $ используется для определения jQuery как $= jQuery.
Теперь разница в том, что
$(document).ready - событие jQuery, которое запускается при загрузке DOM, поэтому его запускается, когда структура документа готова.
$(window).load событие запускается после того, как весь контент загружен, как страница содержит изображения, css и т.д.
Готовое событие происходит после загрузки документа HTML, в то время как событие onload происходит позже, когда также загружается весь контент (например, изображения).
Событие onload является стандартным событием в DOM, а готовое событие специфично для jQuery. Цель готового события состоит в том, что он должен появиться как можно раньше после загрузки документа, так что код, добавляющий функциональность элементам на странице, не должен ждать загрузки всего содержимого.
Разница между функциями $(document).ready() и $(window).load() заключается в том, что код, включенный в $(window).load() будет запускаться один раз на всей странице (изображения, фреймы, таблицы стилей и т.д.) загружаются, тогда как событие готовности к документу запускается до того, как все изображения, фреймы и т.д. загружаются, но после того, как весь сам DOM готов.
$(document).ready(function(){
})
а также
$(function(){
});
а также
jQuery(document).ready(function(){
});
Нет разницы между вышеуказанными 3 кодами.
Они эквивалентны, но вы можете столкнуться с конфликтом, если любой другой JavaScript-фреймворк использует тот же символ доллара $, что и имя ярлыка.
jQuery.noConflict();
jQuery.ready(function($){
//Code using $ as alias to jQuery
});
Готовое событие всегда выполняется на единственной странице html, загружаемой в браузер, и функции выполняются.... Но событие загрузки выполняется во время загрузки всех страниц в браузер для страницы..... мы можем использовать $или jQuery, когда мы используем метод noconflict() в сценариях jquery...
$(document).ready(function(e) {
// executes when HTML-Document is loaded and DOM is ready
console.log("page is loading now");
});
$(document).load(function(e) {
//when html page complete loaded
console.log("completely loaded");
});
$ (window).load - это событие, которое запускается, когда DOM и весь контент (все) на странице полностью загружаются, например, CSS, изображения и фреймы. Один из лучших примеров - если мы хотим получить фактический размер изображения или узнать подробности всего, что мы используем.
$ (document).ready() указывает, что код в нем должен быть выполнен, когда DOM загружен и готов к работе скриптом. Он не будет ждать загрузки изображений для выполнения скрипта jQuery.
<script type = "text/javascript">
//$(window).load was deprecated in 1.8, and removed in jquery 3.0
// $(window).load(function() {
// alert("$(window).load fired");
// });
$(document).ready(function() {
alert("$(document).ready fired");
});
</script>
$ (window).load запускается после $ (document).ready().
$(document).ready(function(){
})
//and
$(function(){
});
//and
jQuery(document).ready(function(){
});
Выше 3 одинаковые, $ является псевдонимом jQuery, вы можете столкнуться с конфликтом, если какой-либо другой фреймворк JavaScript использует тот же символ доллара $. Если вы столкнулись с конфликтом, команда jQuery предоставит решение, не конфликтующее подробнее
$ (window).load устарела в версии 1.8 и удалена в jquery 3.0
$(window).load()
Код, который включается в $ (window).on("load", function() {...}), запускается только после того, как вся страница готова (не только DOM).
Примечание: метод load() устарел в jQuery версии 1.8. Он был полностью удален в версии 3.0. Чтобы увидеть его работу, добавьте версию jQuery для CDN до 3.0.
$(document).ready()
Метод ready() используется, чтобы сделать функцию доступной после загрузки документа. Какой бы код вы ни написали в методе $ (document).ready(), он будет запущен, когда DOM страницы будет готов выполнить код JavaScript.