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

286

Каковы различия между

$(document).ready(function(){
 //my code here
});

и

$(window).load(function(){
  //my code here
});

И я хочу убедиться, что:

$(document).ready(function(){

}) 

и

$(function(){

}); 

и

jQuery(document).ready(function(){

});

совпадают.

Можете ли вы рассказать мне, какие различия и сходства между ними?

  • 10
    возможный дубликат window.onload против document.ready
  • 1
    LOLZ, он скопировал с той же ссылки после меня (без упоминания) и получил: P Урок выучен, не объясняйте разработчикам, им нравится видеть код: D
Показать ещё 3 комментария
Теги:

9 ответов

411
Лучший ответ

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

Срочные изменения:.load(),.unload() и .error() удалены

Эти методы являются ярлыками для операций с событиями, но имеют несколько ограничений 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(){
})
  • 24
    указать на оригинальный пост: 4loc.wordpress.com/2009/04/28/documentready-vs-windowload
  • 0
    @PranayRana, спасибо.
Показать ещё 6 комментариев
29

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

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

11

Из jQuery API Document

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

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


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

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

9

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

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

9

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

$(document).ready(function(){

}) 

и

$(function(){

}); 

и

jQuery(document).ready(function(){

});

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

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

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

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

4

Разница между функциями $(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
});
  • 0
    Разница между jQuery (документ) .ready (function () {и jQuery (document) .ready (function ($) {? Обратите внимание на $ в скобках).
3
$(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"); 
});
  • 2
    Пожалуйста, объясните ваш ответ.
3

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

0

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

Ещё вопросы

Сообщество Overcoder
Наверх
Меню