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

Question

Чем отличаются

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

и

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

---

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

$(document).ready(function(){

}) 

и

$(function(){

}); 

и

jQuery(document).ready(function(){

});

одинаковы.

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

Answer 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>

Версия Query 3.0

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

Эти методы являются ярлыками для операций с событиями, но имели несколько API ограничения. Метод события .load() конфликтует с ajax .load() метод. Метод .error() нельзя использовать с window.onerror из-за способа определения метода DOM. Если вам нужно прикрепить события с этими именами, используйте метод .on(), например, менять $("img").load(fn) до $(img).on("load", fn). ¹

$(window).load(function() {});

Должен быть изменен на

$(window).on('load', function (e) {})

Все они эквивалентны:

$(function(){
}); 

jQuery(document).ready(function(){
});

$(document).ready(function(){
});

$(document).on('ready', function(){
})

Answer 2

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

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

Answer 3

Из документа jQuery API

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

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

---

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

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

Answer 4

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

$(document).ready(function(){

}) 

и

$(function(){

}); 

и

jQuery(document).ready(function(){

});

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

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

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

$(window).load Событие запускается после загрузки всего содержимого, например, страницы, содержащей изображения, CSS и т. Д.

Answer 5

Разница между функциями $(document).ready() и $(window).load() заключается в том, что код, включенный в $(window).load(), будет запускаться после загрузки всей страницы (изображений, фреймов, таблиц стилей и т. Д.), Тогда как документ готов событие запускается до того, как все изображения, iframe и т. д. загружены, но после того, как готов весь DOM.

---

$(document).ready(function(){

}) 

и

$(function(){

});

и

jQuery(document).ready(function(){

});

Нет разницы между вышеуказанными 3 кодами.

Они эквивалентны, но вы можете столкнуться с конфликтом, если какие-либо другие фреймворки JavaScript используют тот же символ доллара $ в качестве имени ярлыка.

jQuery.noConflict();
jQuery.ready(function($){
 //Code using $ as alias to jQuery
});

Answer 6

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

Answer 7

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

Answer 8

$(window).load()

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

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

$(document).ready()

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

Answer 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 предоставит решение без конфликтов подробнее.

$ (окно) .load устарела в версии 1.8 и удалена в jquery 3.0