window.onload vs $ (document) .ready ()


1244

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



Більшість відповідей тут застарілі. Те, як реалізує jQuery в даний час, $().ready()робить його вогнем window.onloadчасом.
Shikkediel

Відповіді:


1243

readyПодія відбувається після того, як був завантажений HTML документ, в той час як onloadподія відбувається пізніше, коли весь вміст (наприклад , зображення) , також був завантажений.

onloadПодія є стандартним подією в DOM, в той час як readyподія є специфічним для JQuery. Мета readyподії полягає в тому, що вона повинна відбутися якомога раніше після завантаження документа, так що код, який додає функціональність елементів на сторінці, не повинен чекати завантаження всього вмісту.


153
@baptx: Ви помиляєтесь. readyПодія є специфічні для JQuery. Він використовує DOMContentLoadedподію, якщо вона доступна в браузері, інакше вона імітує її. У DOM немає точного еквівалента, оскільки DOMContentLoadedподія підтримується не в усіх браузерах.
Гуффа

18
Добре, але такий же результат існує і з DOMContentLoaded, можливо, ви повинні це вказати
baptx

55
@baptx: Я не вважав, що це відповідає питанням, і я досі не думаю.
Гуффа

17
Чому потік? Якщо ви не поясните, що ви вважаєте неправильним, це не може покращити відповідь.
Гуффа

4
Немає такої події, як onload. onload- назва властивості об'єкта, що зберігає функцію, яку слід викликати при loadзапуску події.
Скотт Маркус

140

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(який реалізований навіть у старих браузерах), який запускається під час завантаження всієї сторінки (зображення, стилі тощо)

16
Тут є невелике помилкове уявлення: loadподія windowреалізовано досить послідовно у веб-переглядачах. Проблема, яку намагаються вирішити jQuery та інші бібліотеки, - це те, що ви згадали, і це те, що loadподія не запускається, поки не завантажуються всі залежні ресурси, такі як зображення та таблиці стилів, що може пройти довгий час після повного завантаження DOM, надані та готові до взаємодії. Подія , яке спрацьовує в більшості браузерів , коли DOM готова називається DOMContentLoaded, чи не DOMContentReady.
Тім Даун

2
@Tim Down: розумно ключове слово тут; принаймні якесь обнюхування об'єкта раніше було необхідне, навіть onloadякщо є (відмінності wrt FF / IE / Opera). Щодо того DOMContentLoaded, ви абсолютно правильні. Редагування для уточнення.
Пісквор вийшов з будівлі

Який предмет нюхаєш на увазі?
Тім Даун

1
@Tim Down: Я знаю, що Opera мала це, але тригер події на ньому був трохи химерним (щоб надійно спрацьовувати, document.onloadбуло придатним). Що стосується window.onload: window.onload = fn1;window.onload=fn2;- тільки fn2 буде викликано onload. Деякі безкоштовні веб-хостинги вставляють свій власний код у документи, а іноді цей клобує код на сторінці.
Пісквор вийшов з будівлі

1
Не написано "document.ready" неправильно? об’єкт документа не має готового методу, об'єкт jQuery робить, що повертається з виклику $ (document). Будь ласка, відредагуйте цю відповідь, якщо я правий, тому що це дуже заплутано.
А. Салай

87

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

  • Він не чекатиме завантаження зображень.
  • Використовується для виконання JavaScript, коли DOM повністю завантажений. Покладіть сюди обробників подій.
  • Може використовуватися кілька разів.
  • Замінити $з , jQueryколи ви отримуєте «$ не визначено.»
  • Не використовується, якщо ви хочете маніпулювати зображеннями. Використовуйте $(window).load()замість цього.

window.onload()- це нативна функція JavaScript. У window.onload()подію спрацьовує , коли весь вміст на сторінці завантажиться, в тому числі DOM (Document Object Model), рекламних банерів та зображень. Ще одна різниця між ними полягає в тому, що, хоча ми можемо мати більше однієї $(document).ready()функції, ми можемо мати лише одну onloadфункцію.


4
Незначна точка: обговорення IE погано сформульовано. Справа не в тому, що IE (8 і раніше) "не може безпечно запустити", поки готовий документ не завершиться, це те, що IE не вистачило події DOMContentLoaded. Не питання "безпеки", а відсутня функція в IE, додана в IE 9.
ToolmakerSteve

Ви праві, тому я відредагував відповідь, щоб відобразити ваш коментар та подяку!
Джеймс Дрінкард

Ви кажете "Це не чекатиме завантаження зображень". що з іншими файлами, js головне? Часто перед викликом функції з іншого файлу - мені потрібно знати, чи він завантажений.
Дарій.V

Це взагалі інша тема, але якщо я розумію, про що ви запитуєте, вона базується на тому, як ви структуруєте свою сторінку, включаючи порядок розміщення файлів js. Ось посилання, яке детальніше описується: ablogaboutcode.com/2011/06/14/… HTH, James
Джеймс Дрінкард

Чому хтось захоче кілька разів використовувати $ (document) .ready ()?
Усман

43

Навантаження Windows , спрацьовує подія , коли весь вміст на сторінці повністю навантажені включаючи DOM (Document Object Model) зміст і асинхронні JavaScript , кадри і зображення . Ви також можете використовувати оновлення body =. Обидва однакові; window.onload = function(){}і <body onload="func();">різні способи використання однієї і тієї ж події.

$document.readyПодія функції jQuery виконується трохи раніше, ніж window.onloadі викликається після завантаження на вашу сторінку DOM (Модель об'єкта документа). Він не чекатиме, коли зображення, кадри повністю завантажуються .

Взяті з наступної статті: як $document.ready()відрізняється відwindow.onload()


Я думаю, що це найкраща відповідь!
Хаою Чень

3
Я можу погодитися, якби це не було скопійовано слово за словом.
Кевін Б

23

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


22

Застереження щодо використання $(document).ready()з Internet Explorer. Якщо запит HTTP перервано перед завантаженням всього документа (наприклад, поки сторінка потокове в браузер, натискається інше посилання) IE запустить $(document).readyподію.

Якщо який-небудь код у $(document).ready()події посилається на DOM-об'єкти, існує потенціал, що ці об’єкти не можуть бути знайдені, і можуть виникнути помилки Javascript. Або захистіть свої посилання на ці об’єкти, або відкладіть код, який посилає ці об’єкти на подію window.load.

Я не зміг відтворити цю проблему в інших веб-переглядачах (зокрема, Chrome і Firefox)


Яка версія IE? Я знаю, що я повинен дбати про сумісність, але з IE важко. Чи прийнятно використовувати document.ready лише для JavaScript?
Моніка


22

Маленька порада:

Завжди використовуйте, 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(), ніж завантажувати.


3
Це не відповідає на поставлене запитання.

17

Події

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

Подальше читання


Ви можете пояснити, будь ласка, $ (document) .load (обробник) поводиться так само, як прив'язка до події load. На відміну від $ .fn.ready, він не зателефонує одразу?
Набіель Хан

Я думаю, що ти збентежився тим, $.fn.loadщо більше не ведеш себе як в'яжучий захід. Насправді це застаріло з часу jquery 1.8. Я оновив її відповідно
абстрактор

16

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

Також я створив зображення нижче, як короткі посилання на обидва:

введіть тут опис зображення


1
прекрасно, посилання на документи є плюсом .. thnx
Ірф


11

Одне, що слід пам’ятати (чи слід сказати, згадати), це те, що ви не можете складати onloadстільки, як ви можете ready. Іншими словами, магія jQuery дозволяє декілька readys на одній сторінці, але ви не можете цього зробити onload.

Останній onloadперекриє будь-які попередні onloads.

Гарний спосіб впоратися з цим - це функція, очевидно, написана одним Саймоном Віллісоном та описана в розділі Використання декількох функцій завантаження 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 */
});

11

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

5

Подія 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;

2

window.onloadє вбудованою функцією JavaScript. window.onloadтригер при завантаженні HTML-сторінки. window.onloadможна написати лише один раз.

document.readyє функцією бібліотеки jQuery. document.readyзапускає, коли повністю завантажуються HTML та всі коди JavaScript, CSS та зображення, що входять у файл HTML. document.readyможе бути написано кілька разів відповідно до вимог.


"window.onload - це функція" невірна, оскільки @ Ілья-Зеленько демонструє, що це властивість, а не функція. Деталі: developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/… тоді як .ready () - це функція і очікує обробника.
vik

1

Коли ви говорите $(document).ready(f), ви скажете движкові сценарію зробити наступне:

  1. дістаньте об'єктний документ і натисніть його, оскільки він не знаходиться в локальному масштабі, він повинен здійснити пошук хеш-таблиці, щоб знайти, де документ, на щастя, документ є глобально пов'язаним, тому це єдиний пошук.
  2. знайдіть об’єкт $і виберіть його, оскільки він не знаходиться в локальному масштабі, він повинен здійснити пошук хеш-таблиці, який може мати або не мати зіткнень.
  3. знайти об’єкт f в глобальному масштабі, який є іншим пошуком хеш-таблиці, або об'єкт push-функції та ініціалізуйте його.
  4. виклик readyвибраного об'єкта, який передбачає пошук іншого хеш-таблиці у вибраному об'єкті, щоб знайти метод та викликати його.
  5. зроблено.

У кращому випадку це 2 пошукові таблиці хеш-таблиць, але це ігнорування важкої роботи, виконаної jQuery, де $знаходиться кухонна раковина всіх можливих входів до jQuery, тому інша карта, ймовірно, може відправити запит на виправлення обробника.

Можна також зробити це:

window.onload = function() {...}

який буде

  1. знайдіть вікно об'єкта в глобальному масштабі, якщо оптимізовано JavaScript, він буде знати, що оскільки вікно не змінено, воно вже вибрано об'єкт, тому нічого не потрібно робити.
  2. об'єкт функції висувається на стек операндів.
  3. перевірте, чи onloadє властивість чи ні, роблячи пошук хеш-таблиці, оскільки вона є, вона називається функцією.

У кращому випадку це коштує пошуку однієї хеш-таблиці, яка необхідна, оскільки її onloadпотрібно отримати.

В ідеалі, jQuery збирає свої запити до рядків, які можна вставити, щоб зробити те, що ви хотіли, щоб зробити jQuery, але без розсилки jQuery під час виконання. Таким чином у вас є варіант будь-якого

  1. робити динамічну розсилку jquery, як ми робимо сьогодні.
  2. мають jQuery скласти ваш запит у чисту строку JavaScript, яка може бути передана eval, щоб зробити те, що ви хочете.
  3. скопіюйте результат 2 безпосередньо у свій код і пропустіть вартість eval.

0

window.onload надається DOM api, і він говорить "подія завантаження спрацьовує, коли даний ресурс завантажений".

"Подія завантаження запускається в кінці процесу завантаження документа. На цьому етапі всі об'єкти в документі знаходяться в DOM, а всі зображення, сценарії, посилання та підкадри закінчуються завантаженням." DOM onload

Але в jQuery $ (document) .ready () запуститься лише після того, як сторінка Модель об'єкта документа (DOM) буде готова до виконання коду JavaScript. Це не включає зображення, сценарії, рамки тощо. Jquery ready event

Тож готовий метод jquery запуститься раніше, ніж подія dom onload.

Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.