Різниця між функціями $ (window) .load () та $ (document) .ready ()

216

Яка різниця між $(window).load(function() {})та $(document).ready(function() {})у jQuery?

jquery

— Сатья
джерело

266

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

— Нік Крейвер
джерело

38

скорочення для $(document).ready(function(){})- це $(function(){})і ще одна важлива відмінність від window.load - це те, що він працюватиме на ВСІХ майбутніх викликах функції, навіть після початкового DOM уже.

— Майкл Батлер

2

@dbliss Так, я вважаю, що завантаження є скороченим $(window).on('load'). Обидва посилання на подію навантаження .

— Безкоштовний улан

5

@MichaelButler - Що ти маєш на увазі it will run on ALL future calls of the function?

— BornToCode

7

@MichaelButler: Вам потрібно бути більш чітким у своєму коментарі. 1) Ви говорите про те, що USER виконує більше $(document).readyкоду після того, як DOM буде готовий. Це такий маленький випадок використання, що, мабуть, не варто було плутати всіх із згадуванням. 2) ЕКОЛОГІЯ дзвонить лише $(document).ready(f‌unction(){})один раз, коли DOM буде готовий. Якщо користувач чомусь виконає більше $(document).readyпісля того, як DOM буде готовий, то так, це буде виконано негайно.

— Doug S

4

Я прошу різнитися, Майкл. Давайте просто залишимо це на цьому, а не деградуємо на марні коментарі. Принаймні, розгублені люди зараз мають свою відповідь.

— Doug S

73

$(document).ready(function() {
 // executes when HTML-Document is loaded and DOM is ready
 alert("document is ready");
});


$(window).load(function() {
 // executes when complete page is fully loaded, including all frames, objects and images
 alert("window is loaded");
});

— SagarPPanchal
джерело

22

$(window).load()НЕ доступний в JQuery 3.0

$( window ).load(function() {
        // Handler for .load() called.
});

Щоб обійти його, ви можете використовувати його як "додаток до обробника подій"

$( window ).on("load", function() {
        // Handler for .load() called.
});

— Кін Амарал
джерело

14

Різниця:

$(document).ready(function() { це подія jQuery, яке запускається під час завантаження DOM, тому воно запускається, коли структура документа готова.

$(window).load() подія запускається після завантаження всього вмісту.

— Бхарат Чодвадія
джерело

9

<html>
<head>
    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
    <script>
    $( document ).ready(function() {
        alert( "document loaded" );
    });

    $( window ).load(function() {
        alert( "window loaded" );
    });
    </script>
</head>
<body>
    <iframe src="http://stackoverflow.com"></iframe>
</body>
</html>

window.load буде запущено після завантаження всього вмісту iframe

— Шейк Расол
джерело

7

$(document).ready трапляється, коли всі елементи присутні у DOM, але не обов'язково весь вміст.

$(document).ready(function() {
    alert("document is ready");
});

window.onloadабо $(window).load()трапляється після завантаження всіх ресурсів вмісту (зображень тощо).

$(window).load(function() {
    alert("window is loaded");
});

— Пурвік Дораджія
джерело

2

З jquery перспективним - це просто додавання load/ onloadподія до вікна та документа. Заціни:

window.onload vs document.onload

— фантактука
джерело

0

document.ready (jQuery) document.ready буде виконуватися відразу після завантаження властивості HTML-документа, і DOM буде готовий.

DOM: Модель об'єкта документа (DOM) - це кросплатформна і незалежна від мови умова для представлення та взаємодії з об'єктами в документах HTML, XHTML та XML.

$(document).ready(function()
{
   // executes when HTML-Document is loaded and DOM is ready
   alert("(document).ready was called - document is ready!");
});

window.load (Вбудований JavaScript) Однак window.load буде чекати, коли сторінка буде повністю завантажена, це включає внутрішні кадри, зображення тощо. * window.load - це вбудований метод JavaScript, відомо, що він примхи у старих браузерах (IE6, IE8, старі версії FF та Opera), але, як правило, працюватимуть у всіх.

window.load можна використовувати в такому випадку події завантаження тіла (але я настійно рекомендую вам уникати змішування такого коду в HTML, оскільки він є джерелом плутанини згодом):

$(window).load(function() 
{
   // executes when complete page is fully loaded, including all frames, objects and images
   alert("(window).load was called - window is loaded!");
});

— Арун Кумар
джерело

0

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

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

— Шрікрушна
джерело

0

Я думаю, що $(window).loadподію не підтримує JQuery 3.x

— user8816619
джерело

1

Відповідно до документації, подія завантаження $ (window) було видалено в JQuery 3.0

— Mathieu VIALES

1

Це вірно. Для того, щоб обійти його, ви можете використовувати його як "додаток до обробника подій": $ (window) .on ("load", function () {// Handler for .load () call.});

— Кін Амарал

0

Відповідно до подій DOM рівня 2, loadподія повинна розпочатися document, а не на window. Однак loadвін реалізований windowу всіх браузерах для зворотної сумісності.

— Джонс Агєманг
джерело