JQuery - Каковы различия между $(document).ready и $(window).load?

Ответ 1

$(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>

Ответ 2

document.ready - событие jQuery, оно выполняется, когда DOM готов, например. все элементы должны быть найдены/использованы, но не обязательно все содержимое.
window.onload срабатывает позже (или в то же время в случае худших/неудачных случаев) при загрузке изображений и т.д. Итак, если вы используете размеры изображения, например, вы часто хотите использовать это.

Также прочитайте связанный с этим вопрос:
Разница между функциями $(window).load() и $(document).ready()

Ответ 3

Из jQuery API Document

Хотя JavaScript предоставляет событие load для выполнения кода, когда страница отображается, это событие не запускается до тех пор, пока все активы такие как изображения, были полностью получены. В большинстве случаев script может быть запущен, как только иерархия DOM будет полностью построен. Передатчик, переданный в .ready(), гарантированно будет выполняется после того, как DOM готов, так что это, как правило, лучшее место для присоединить все другие обработчики событий и запустить другой код jQuery. Когда используешь скрипты, которые полагаются на ценность свойств стиля CSS, важно ссылаться на внешние таблицы стилей или внедрять элементы стиля перед ссылаясь на сценарии.

В случаях, когда код использует загруженные активы (например, если размеры изображения требуются), код должен быть помещен в вместо load.

Ответ на второй вопрос -

Нет, они идентичны, если вы не используете jQuery в режиме без конфликтов.

Ответ 4

Эта три функции одинаковы.

$(document).ready(function(){

}) 

и

$(function(){

}); 

и

jQuery(document).ready(function(){

});

здесь $ используется для определения jQuery как $= jQuery.

Теперь разница в том, что

$(document).ready - событие jQuery, которое запускается при загрузке DOM, поэтому его запускается, когда структура документа готова.

$(window).load событие запускается после того, как весь контент загружен, как страница содержит изображения, css и т.д.

Ответ 5

Готовое событие происходит после загрузки документа HTML, в то время как событие onload происходит позже, когда также загружается весь контент (например, изображения).

Событие onload является стандартным событием в DOM, а готовое событие специфично для jQuery. Цель готового события состоит в том, что он должен появиться как можно раньше после загрузки документа, так что код, добавляющий функциональность элементам на странице, не должен ждать загрузки всего содержимого.

Ответ 6

Разница между функциями $(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
});

Ответ 7

Готовое событие всегда выполняется на единственной странице html, загружаемой в браузер, и функции выполняются.... Но событие загрузки выполняется во время загрузки всех страниц в браузер для страницы..... мы можем использовать $или jQuery, когда мы используем метод noconflict() в сценариях jquery...

Ответ 8

$(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"); 
});

Ответ 9

$ (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

Ответ 10

$(window).load()

Код, который включается в $ (window).on("load", function() {...}), запускается только после того, как вся страница готова (не только DOM).

Примечание: метод load() устарел в jQuery версии 1.8. Он был полностью удален в версии 3.0. Чтобы увидеть его работу, добавьте версию jQuery для CDN до 3.0.

$(document).ready()

Метод ready() используется, чтобы сделать функцию доступной после загрузки документа. Какой бы код вы ни написали в методе $ (document).ready(), он будет запущен, когда DOM страницы будет готов выполнить код JavaScript.