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

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

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

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

Эти методы являются ярлыками для операций с событиями, но имеют несколько ограничений API. Метод события .load()конфликтовал с .load() методом ajax . Этот .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(){
})

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

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

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

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

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

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

Нет, они идентичны, если вы не используете 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
});

Событие ready всегда выполняется при загрузке только html-страницы в браузер, и функции выполняются .... Но событие load выполняется во время загрузки всего содержимого страницы в браузер для страницы ... .. мы можем использовать $ или 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