Каковы различия между
$(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>
Версия Query 3.0
Эти методы являются ярлыками для операций с событиями, но имеют несколько ограничений API. Метод события
.load()
конфликтовал с методом ajax.load()
. Метод.error()
не может использоваться сwindow.onerror
из-за способа определения метода DOM. Если вам нужно прикрепить события к этим именам, используйте метод.on()
, например, измените$("img").load(fn)
$(img).on("load", fn)
$("img").load(fn)
на$(img).on("load", fn)
. 1
$(window).load(function() {});
Должен быть изменен на
$(window).on('load', function (e) {})
Все они эквивалентны:
$(function(){
});
jQuery(document).ready(function(){
});
$(document).ready(function(){
});
$(document).on('ready', function(){
})
document.ready
- событие jQuery, оно выполняется, когда DOM готов, например. все элементы должны быть найдены/использованы, но не обязательно все содержимое. window.onload
срабатывает позже (или в то же время в случае худших/неудачных случаев) при загрузке изображений и т.д. Итак, если вы используете размеры изображения, например, вы часто хотите использовать это.
Также прочитайте связанный с этим вопрос:
Разница между функциями $(window).load() и $(document).ready()
Хотя JavaScript предоставляет событие
load
для выполнения кода, когда страница отображается, это событие не запускается до тех пор, пока все активы такие как изображения, были полностью получены. В большинстве случаев script может быть запущен, как только иерархия DOM будет полностью построен. Передатчик, переданный в.ready()
, гарантированно будет выполняется после того, как DOM готов, так что это, как правило, лучшее место для присоединить все другие обработчики событий и запустить другой код jQuery. Когда используешь скрипты, которые полагаются на ценность свойств стиля CSS, важно ссылаться на внешние таблицы стилей или внедрять элементы стиля перед ссылаясь на сценарии.В случаях, когда код использует загруженные активы (например, если размеры изображения требуются), код должен быть помещен в вместо
load
.
Ответ на второй вопрос -
Нет, они идентичны, если вы не используете jQuery в режиме без конфликтов.
Готовое событие происходит после загрузки документа HTML, в то время как событие onload происходит позже, когда также загружается весь контент (например, изображения).
Событие onload является стандартным событием в DOM, а готовое событие специфично для jQuery. Цель готового события состоит в том, что он должен появиться как можно раньше после загрузки документа, так что код, добавляющий функциональность элементам на странице, не должен ждать загрузки всего содержимого.
Эта три функции одинаковы.
$(document).ready(function(){
})
и
$(function(){
});
и
jQuery(document).ready(function(){
});
здесь $
используется для определения jQuery
как $
= jQuery
.
Теперь разница в том, что
$(document).ready
- событие jQuery, которое запускается при загрузке DOM
, поэтому его запускается, когда структура документа готова.
$(window).load
событие запускается после того, как весь контент загружен, как страница содержит изображения, css и т.д.
Разница между функциями $(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
});
$(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");
});
Готовое событие всегда выполняется на единственной странице html, загружаемой в браузер, и функции выполняются.... Но событие загрузки выполняется во время загрузки всех страниц в браузер для страницы..... мы можем использовать $или jQuery, когда мы используем метод noconflict() в сценариях jquery...
$ (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