jQuery - Які відмінності між завантаженням $ (document) .ready і $ (window)?

У чому полягають відмінності

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

Версія запиту 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(){

});

тут $використовується для визначення jQuerylike $= 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 Frameworks використовує той самий символ долара $, як ім'я ярлика.

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

Готова подія завжди виконується на тому, що в браузер завантажується лише HTML-сторінка, а функції виконуються .... Але подія завантаження виконується під час завантаження всього вмісту сторінки в браузер для сторінки ... .. ми можемо використовувати $ або 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 запускається після $ (документа) .ready ().

$(document).ready(function(){

}) 
//and 
$(function(){

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

});

Вище 3 є однаковими, $ - псевдонім ім'я jQuery, ви можете зіткнутися з конфліктом, якщо будь-які інші рамки JavaScript використовують той же символ долара $. Якщо ви зіткнулися з конфліктом, команда jQuery надає рішення без конфлікту читайте докладніше.

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