Які відмінності між методом JavaScript window.onload
та jQuery $(document).ready()
?
$().ready()
робить його вогнем window.onload
часом.
Які відмінності між методом JavaScript window.onload
та jQuery $(document).ready()
?
$().ready()
робить його вогнем window.onload
часом.
Відповіді:
ready
Подія відбувається після того, як був завантажений HTML документ, в той час як onload
подія відбувається пізніше, коли весь вміст (наприклад , зображення) , також був завантажений.
onload
Подія є стандартним подією в DOM, в той час як ready
подія є специфічним для JQuery. Мета ready
події полягає в тому, що вона повинна відбутися якомога раніше після завантаження документа, так що код, який додає функціональність елементів на сторінці, не повинен чекати завантаження всього вмісту.
ready
Подія є специфічні для JQuery. Він використовує DOMContentLoaded
подію, якщо вона доступна в браузері, інакше вона імітує її. У DOM немає точного еквівалента, оскільки DOMContentLoaded
подія підтримується не в усіх браузерах.
onload
. onload
- назва властивості об'єкта, що зберігає функцію, яку слід викликати при load
запуску події.
window.onload
- це вбудована подія JavaScript, але оскільки її реалізація мала тонкі химерності у веб-переглядачах (Firefox, Internet Explorer 6, Internet Explorer 8 та Opera ), надає jQuery document.ready
, яка резюмує тих, хто проходить, і запускається, як тільки DOM сторінки буде готовий (не чекає зображень тощо).
$(document).ready
(зауважте, що це не document.ready
, що не визначено) - це функція jQuery, що забезпечує обговорення та надання послідовності наступним подіям:
document.ondomcontentready
/ document.ondomcontentloaded
- нова подія, яка запускається під час завантаження DOM документа (який може пройти деякий час до завантаження зображень тощо); знову ж таки, трохи по-іншому в Internet Explorer і в іншому світіwindow.onload
(який реалізований навіть у старих браузерах), який запускається під час завантаження всієї сторінки (зображення, стилі тощо)load
подія window
реалізовано досить послідовно у веб-переглядачах. Проблема, яку намагаються вирішити jQuery та інші бібліотеки, - це те, що ви згадали, і це те, що load
подія не запускається, поки не завантажуються всі залежні ресурси, такі як зображення та таблиці стилів, що може пройти довгий час після повного завантаження DOM, надані та готові до взаємодії. Подія , яке спрацьовує в більшості браузерів , коли DOM готова називається DOMContentLoaded
, чи не DOMContentReady
.
onload
якщо є (відмінності wrt FF / IE / Opera). Щодо того DOMContentLoaded
, ви абсолютно правильні. Редагування для уточнення.
document.onload
було придатним). Що стосується window.onload: window.onload = fn1;window.onload=fn2;
- тільки fn2 буде викликано onload. Деякі безкоштовні веб-хостинги вставляють свій власний код у документи, а іноді цей клобує код на сторінці.
$(document).ready()
це подія jQuery. $(document).ready()
Метод JQuery викликається, як тільки DOM буде готовий (це означає, що браузер розібрав HTML і створив дерево DOM). Це дозволяє запустити код, як тільки документ готовий до маніпулювання.
Наприклад, якщо веб-переглядач підтримує подію DOMContentLoaded (як це роблять багато браузери, які не є IE), він запустить цю подію. (Зауважте, що подія DOMContentLoaded додана до IE лише в IE9 +.)
Для цього можна використовувати два синтаксиси:
$( document ).ready(function() {
console.log( "ready!" );
});
Або скорочена версія:
$(function() {
console.log( "ready!" );
});
Основні моменти $(document).ready()
:
$
з , jQuery
коли ви отримуєте «$ не визначено.»$(window).load()
замість цього. window.onload()
- це нативна функція JavaScript. У window.onload()
подію спрацьовує , коли весь вміст на сторінці завантажиться, в тому числі DOM (Document Object Model), рекламних банерів та зображень. Ще одна різниця між ними полягає в тому, що, хоча ми можемо мати більше однієї $(document).ready()
функції, ми можемо мати лише одну onload
функцію.
Навантаження Windows , спрацьовує подія , коли весь вміст на сторінці повністю навантажені включаючи DOM (Document Object Model) зміст і асинхронні JavaScript , кадри і зображення . Ви також можете використовувати оновлення body =. Обидва однакові; window.onload = function(){}
і <body onload="func();">
різні способи використання однієї і тієї ж події.
$document.ready
Подія функції jQuery виконується трохи раніше, ніж window.onload
і викликається після завантаження на вашу сторінку DOM (Модель об'єкта документа). Він не чекатиме, коли зображення, кадри повністю завантажуються .
Взяті з наступної статті:
як $document.ready()
відрізняється відwindow.onload()
$(document).ready(function() {
// Executes when the HTML document is loaded and the DOM is ready
alert("Document is ready");
});
// .load() method deprecated from jQuery 1.8 onward
$(window).on("load", function() {
// Executes when complete page is fully loaded, including
// all frames, objects and images
alert("Window is loaded");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
Застереження щодо використання $(document).ready()
з Internet Explorer. Якщо запит HTTP перервано перед завантаженням всього документа (наприклад, поки сторінка потокове в браузер, натискається інше посилання) IE запустить $(document).ready
подію.
Якщо який-небудь код у $(document).ready()
події посилається на DOM-об'єкти, існує потенціал, що ці об’єкти не можуть бути знайдені, і можуть виникнути помилки Javascript. Або захистіть свої посилання на ці об’єкти, або відкладіть код, який посилає ці об’єкти на подію window.load.
Я не зміг відтворити цю проблему в інших веб-переглядачах (зокрема, Chrome і Firefox)
Завжди використовуйте, window.addEventListener
щоб додати подію до вікна. Тому що ви можете виконати код у різних обробниках подій.
Правильний код:
window.addEventListener('load', function () {
alert('Hello!')
})
window.addEventListener('load', function () {
alert('Bye!')
})
Невірний код:
window.onload = function () {
alert('Hello!') // it will not work!!!
}
window.onload = function () {
alert('Bye!')
}
Це тому, що onload - це лише властивість об'єкта, який перезаписується.
За аналогією з addEventListener
, краще використовувати $(document).ready()
, ніж завантажувати.
$(document).on('ready', handler)
прив'язує до готової події від jQuery. Обробник викликається, коли DOM завантажується . Такі активи, як зображення, можливо, все ще відсутні . Він ніколи не буде викликаний, якщо документ буде готовий на момент прив'язки. jQuery для цього використовує DOMContentLoaded -Event, емулюючи його, якщо він недоступний.
$(document).on('load', handler)
це подія, яка буде запущена після завантаження всіх ресурсів із сервера. Зображення завантажуються зараз. Хоча onload - це сирий подія HTML, готовий будується jQuery.
$(document).ready(handler)
насправді це обіцянка . Обробник буде викликаний негайно, якщо документ буде готовий на момент виклику. В іншому випадку вона пов'язується з ready
-Event.
Перед JQuery 1.8 , $(document).load(handler)
існує в якості псевдоніма для $(document).on('load',handler)
.
$.fn.load
що більше не ведеш себе як в'яжучий захід. Насправді це застаріло з часу jquery 1.8. Я оновив її відповідно
$(document).ready()
Є JQuery подія , яке відбувається , коли HTML документ був повністю завантажений, в той час як window.onload
подія відбувається пізніше, коли все , в тому числі зображення на сторінці завантажений.
Також window.onload є чистою подією JavaScript у DOM, тоді як $(document).ready()
подія є методом у jQuery.
$(document).ready()
зазвичай це обгортка для jQuery, щоб переконатися, що всі елементи, завантажені для використання в jQuery ...
Погляньте на вихідний код jQuery, щоб зрозуміти, як він працює:
jQuery.ready.promise = function( obj ) {
if ( !readyList ) {
readyList = jQuery.Deferred();
// Catch cases where $(document).ready() is called after the browser event has already occurred.
// we once tried to use readyState "interactive" here, but it caused issues like the one
// discovered by ChrisS here: http://bugs.jquery.com/ticket/12282#comment:15
if ( document.readyState === "complete" ) {
// Handle it asynchronously to allow scripts the opportunity to delay ready
setTimeout( jQuery.ready );
// Standards-based browsers support DOMContentLoaded
} else if ( document.addEventListener ) {
// Use the handy event callback
document.addEventListener( "DOMContentLoaded", completed, false );
// A fallback to window.onload, that will always work
window.addEventListener( "load", completed, false );
// If IE event model is used
} else {
// Ensure firing before onload, maybe late but safe also for iframes
document.attachEvent( "onreadystatechange", completed );
// A fallback to window.onload, that will always work
window.attachEvent( "onload", completed );
// If IE and not a frame
// continually check to see if the document is ready
var top = false;
try {
top = window.frameElement == null && document.documentElement;
} catch(e) {}
if ( top && top.doScroll ) {
(function doScrollCheck() {
if ( !jQuery.isReady ) {
try {
// Use the trick by Diego Perini
// http://javascript.nwbox.com/IEContentLoaded/
top.doScroll("left");
} catch(e) {
return setTimeout( doScrollCheck, 50 );
}
// detach all dom ready events
detach();
// and execute any waiting functions
jQuery.ready();
}
})();
}
}
}
return readyList.promise( obj );
};
jQuery.fn.ready = function( fn ) {
// Add the callback
jQuery.ready.promise().done( fn );
return this;
};
Також я створив зображення нижче, як короткі посилання на обидва:
window.onload: нормальна подія JavaScript.
document.ready: конкретна подія jQuery, коли весь HTML завантажений.
Одне, що слід пам’ятати (чи слід сказати, згадати), це те, що ви не можете складати onload
стільки, як ви можете ready
. Іншими словами, магія jQuery дозволяє декілька ready
s на одній сторінці, але ви не можете цього зробити onload
.
Останній onload
перекриє будь-які попередні onload
s.
Гарний спосіб впоратися з цим - це функція, очевидно, написана одним Саймоном Віллісоном та описана в розділі Використання декількох функцій завантаження JavaScript .
function addLoadEvent(func) {
var oldonload = window.onload;
if (typeof window.onload != 'function') {
window.onload = func;
}
else {
window.onload = function() {
if (oldonload) {
oldonload();
}
func();
}
}
}
// Example use:
addLoadEvent(nameOfSomeFunctionToRunOnPageLoad);
addLoadEvent(function() {
/* More code to run on page load */
});
Document.ready
(подія jQuery) запуститься, коли всі елементи будуть на місці, і на них можна посилатися в коді JavaScript, але вміст не обов'язково завантажується. Document.ready
виконується при завантаженні документа HTML.
$(document).ready(function() {
// Code to be executed
alert("Document is ready");
});
window.load
Однак чекатиме сторінки , щоб бути повністю завантажені. Сюди входять внутрішні кадри, зображення тощо.
$(window).load(function() {
//Fires when the page is loaded completely
alert("window is loaded");
});
Подія document.ready відбувається при завантаженні документа HTML, і window.onload
подія відбувається завжди пізніше, коли весь вміст (зображення тощо) завантажений.
Ви можете використовувати document.ready
подію, якщо хочете втрутитися "рано" в процес візуалізації, не чекаючи завантаження зображень. Якщо вам потрібні зображення (або будь-який інший "контент") готові до того, як ваш сценарій "щось зробить", вам потрібно почекати, поки window.onload
.
Наприклад, якщо ви реалізуєте шаблон "Слайд-шоу", і вам потрібно виконати обчислення на основі розмірів зображення, ви можете зачекати, поки window.onload
. В іншому випадку у вас можуть виникнути деякі випадкові проблеми, залежно від швидкості завантаження зображень. Ваш сценарій буде працювати одночасно з потоком, що завантажує зображення. Якщо ваш сценарій досить довгий або сервер досить швидкий, ви можете не помітити проблеми, якщо зображення трапляються вчасно. Але найбезпечнішою практикою було б дозволяти завантажувати зображення.
document.ready
може бути приємною подією для вас, щоб показати деякий знак "завантаження ..." користувачам, і після цього window.onload
ви можете виконати будь-який сценарій, який потребує завантажених ресурсів, а потім остаточно видалити знак "Завантаження ...".
Приклади: -
// document ready events
$(document).ready(function(){
alert("document is ready..");
})
// using JQuery
$(function(){
alert("document is ready..");
})
// window on load event
function myFunction(){
alert("window is loaded..");
}
window.onload = myFunction;
window.onload
є вбудованою функцією JavaScript. window.onload
тригер при завантаженні HTML-сторінки. window.onload
можна написати лише один раз.
document.ready
є функцією бібліотеки jQuery. document.ready
запускає, коли повністю завантажуються HTML та всі коди JavaScript, CSS та зображення, що входять у файл HTML.
document.ready
може бути написано кілька разів відповідно до вимог.
Коли ви говорите $(document).ready(f)
, ви скажете движкові сценарію зробити наступне:
$
і виберіть його, оскільки він не знаходиться в локальному масштабі, він повинен здійснити пошук хеш-таблиці, який може мати або не мати зіткнень.ready
вибраного об'єкта, який передбачає пошук іншого хеш-таблиці у вибраному об'єкті, щоб знайти метод та викликати його.У кращому випадку це 2 пошукові таблиці хеш-таблиць, але це ігнорування важкої роботи, виконаної jQuery, де $
знаходиться кухонна раковина всіх можливих входів до jQuery, тому інша карта, ймовірно, може відправити запит на виправлення обробника.
Можна також зробити це:
window.onload = function() {...}
який буде
onload
є властивість чи ні, роблячи пошук хеш-таблиці, оскільки вона є, вона називається функцією.У кращому випадку це коштує пошуку однієї хеш-таблиці, яка необхідна, оскільки її onload
потрібно отримати.
В ідеалі, jQuery збирає свої запити до рядків, які можна вставити, щоб зробити те, що ви хотіли, щоб зробити jQuery, але без розсилки jQuery під час виконання. Таким чином у вас є варіант будь-якого
eval
.window.onload надається DOM api, і він говорить "подія завантаження спрацьовує, коли даний ресурс завантажений".
"Подія завантаження запускається в кінці процесу завантаження документа. На цьому етапі всі об'єкти в документі знаходяться в DOM, а всі зображення, сценарії, посилання та підкадри закінчуються завантаженням." DOM onload
Але в jQuery $ (document) .ready () запуститься лише після того, як сторінка Модель об'єкта документа (DOM) буде готова до виконання коду JavaScript. Це не включає зображення, сценарії, рамки тощо. Jquery ready event
Тож готовий метод jquery запуститься раніше, ніж подія dom onload.