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

1121

Каковы различия между JavaScript window.onload и jQuery $(document).ready()?

Теги:
javascript-events
unobtrusive-javascript

16 ответов

1082
Лучший ответ

Событие ready происходит после загрузки документа HTML, а событие onload происходит позже, когда также загружается весь контент (например, изображения).

Событие onload является стандартным событием в DOM, а событие ready - специфично для jQuery. Цель события ready заключается в том, что он должен происходить как можно раньше после загрузки документа, так что код, который добавляет функциональность элементам на странице, не должен ждать загрузки всего содержимого.

Поделиться
  • 146
    @baptx: Ты не прав. ready событие относится только к jQuery. Он использует событие DOMContentLoaded если оно доступно в браузере, в противном случае оно эмулирует его. В DOM нет точного эквивалента, потому что событие DOMContentLoaded поддерживается не во всех браузерах.
  • 17
    Хорошо, но тот же результат существует с DOMContentLoaded, возможно, вы должны были указать это
Показать ещё 10 комментариев
125

window.onload - это встроенное событие JavaScript, но поскольку его реализация имела тонкие причуды в браузерах (Firefox, Internet 6, Internet Explorer 8 и Opera), jQuery предоставляет document.ready, который абстрагирует их, и срабатывает, как только страница DOM готова (не дожидается изображений и т.д.).

$(document).ready (обратите внимание, что это не document.ready, то есть undefined) является функцией jQuery, обертыванием и обеспечением согласованности со следующими событиями:

  • document.ondomcontentready/document.ondomcontentloaded - новое событие, которое запускается при загрузке документа DOM (который может занять некоторое время до загрузки изображений и т.д.); опять же, немного отличается в Internet Explorer и в остальном мире
  • и window.onload (который реализуется даже в старых браузерах), который запускается при загрузке всей страницы (изображения, стили и т.д.).
Поделиться
  • 11
    Здесь есть небольшое заблуждение: событие load window реализовано достаточно последовательно во всех браузерах. Упомянутая вами проблема, которую пытаются решить jQuery и другие библиотеки, заключается в том, что событие load не запускается до тех пор, пока не будут загружены все зависимые ресурсы, такие как изображения и таблицы стилей, что может занять длительное время после полной загрузки DOM. , оказанные и готовые к взаимодействию. Событие, которое возникает в большинстве браузеров, когда DOM готов, называется DOMContentLoaded , а не DOMContentReady .
  • 1
    @ Тим Вниз: разумно это ключевое слово здесь; по крайней мере, некоторое прослушивание объекта было необходимо, даже при onload (есть различия в FF / IE / Opera). Что касается DOMContentLoaded , вы совершенно правы. Редактирование, чтобы уточнить.
Показать ещё 6 комментариев
78

$(document).ready() - событие jQuery. Метод JQuerys $(document).ready() вызывается, как только 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).ready(), мы можем иметь только одну функцию onload.

Поделиться
  • 4
    Незначительный момент: обсуждение IE плохо сформулировано. Дело не в том, что IE (8 и раньше) «не может безопасно запускать » до тех пор, пока не будет завершено выполнение документа readyState, а в том, что в IE отсутствует событие DOMContentLoaded. Не вопрос «безопасности», а отсутствующая функция в IE, добавленная в IE 9.
  • 0
    Вы правы, поэтому я отредактировал ответ, чтобы отразить ваш комментарий и спасибо!
Показать ещё 5 комментариев
43

A Событие загрузки Windows запускается, когда весь контент на вашей странице полностью загружен, включая контент DOM (модель объектной модели документа) и асинхронный JavaScript, фреймы и изображения. Вы также можете использовать тело onload =. Оба одинаковы; window.onload = function(){} и <body onload="func();"> - это разные способы использования одного и того же события.

Событие функции jQuery $document.ready выполняется бит раньше, чем window.onload, и вызывается, как только объектная модель DOM (Document object) загружается на вашу страницу. Он не будет ждать, пока изображения, кадры будут полностью загружены.

Взято из следующей статьи: как $document.ready() отличается от window.onload()

Поделиться
  • 0
    Я думаю, что это лучший ответ!
  • 2
    Я мог бы согласиться, если бы это не было скопировано дословно.
22

Предупреждение об использовании $(document).ready() в Internet Explorer. Если HTTP-запрос прерван до того, как весь документ будет загружен (например, пока страница будет передана в браузер, будет нажата другая ссылка) IE запустит событие $(document).ready.

Если какой-либо код в событии $(document).ready() ссылается на объекты DOM, существует потенциал для того, чтобы эти объекты не были найдены, и могут возникнуть ошибки Javascript. Либо охраняйте свои ссылки на эти объекты, либо отложите код, который ссылается на эти объекты на событие window.load.

Я не смог воспроизвести эту проблему в других браузерах (в частности, Chrome и Firefox).

Поделиться
  • 0
    Какая версия IE? Я знаю, что я должен заботиться о совместимости, но это трудно с IE. Допустимо ли использовать document.ready только для JavaScript?
  • 1
    IE6, 7 и 8. См .: stackoverflow.com/questions/13185689/…
Показать ещё 1 комментарий
18 

$(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>
Поделиться
16

События

$(document).on('ready', handler) привязывается к событию готовности из jQuery. Обработчик называется , когда DOM загружается. Активы, подобные изображениям, возможно, отсутствуют.. Он никогда не будет вызываться, если документ готов к моменту привязки. jQuery использует DOMContentLoaded -Event для этого, подражая ему, если он недоступен.

$(document).on('load', handler) - это событие, которое будет запущено после загрузки всех ресурсов с сервера. Теперь изображения загружаются. Пока onload является необработанным событием HTML, ready создается jQuery.

Функции

$(document).ready(handler) фактически promise. Обработчик будет вызываться немедленно, если документ готов во время вызова. В противном случае он привязывается к ready -Event.

До jQuery 1.8, $(document).load(handler) существовал как псевдоним $(document).on('load',handler).

Дополнительная литература

Поделиться
  • 0
    не могли бы вы объяснить, что $ (document) .load (обработчик) ведет себя так же, как привязка к событию load. В отличие от $ .fn.ready, он не будет звонить сразу?
  • 0
    Я думаю, что вы запутались в $.fn.load который больше не работает как $.fn.load событий. На самом деле, он устарел начиная с jquery 1.8. Я обновил его соответственно
Показать ещё 1 комментарий
12

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

Также я создал изображение ниже как краткое описание для обоих:

Изображение 2172

Поделиться
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");
});
Поделиться
11

window.onload: Яркое событие JavaScript.

document.ready: Конкретное событие jQuery, когда весь HTML-код был загружен.

Поделиться
10

Одна вещь, которую нужно помнить (или, я должен сказать, напомнить), состоит в том, что вы не можете выполнять onload как вы можете, с ready. Другими словами, jQuery magic позволяет несколько ready на одной странице, но вы не можете сделать это с помощью onload.

Последняя onload будет отменять любые предыдущие onload.

Хороший способ справиться с этим - функция, написанная, по-видимому, одним Саймоном Виллисоном и описанная в разделе "Использование нескольких функций 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 */
});
Поделиться
5

Небольшой совет:

Всегда используйте 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() а не onload.

Поделиться
  • 0
    Хороший! Интересно, почему ты поднял мои пальцы?
  • 1
    Это не отвечает на заданный вопрос.
4

Событие document.ready происходит, когда документ HTML загружен, а событие window.onload происходит всегда позже, когда загружается весь контент (изображения и т.д.).

Вы можете использовать событие document.ready если хотите вмешаться "рано" в процесс рендеринга, не дожидаясь загрузки изображений. Если вам нужны изображения (или любые другие "контенты"), готовые до того, как ваш скрипт "что-то сделает", вам нужно подождать до window.onload.

Например, если вы используете шаблон "Слайд-шоу", и вам нужно выполнить вычисления на основе размеров изображений, вам может понадобиться ждать window.onload. В противном случае вы можете столкнуться с некоторыми случайными проблемами, в зависимости от того, насколько быстро загружаются изображения. Ваш скрипт будет работать одновременно с потоком, который загружает изображения. Если ваш сценарий достаточно длинный или сервер достаточно быстр, вы можете не заметить проблемы, если изображения произойдут вовремя. Но самая безопасная практика позволит загружать изображения.

document.ready может быть приятным событием для того, чтобы вы могли показать какой-то знак "loading..." для пользователей, а при использовании 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 может быть записано несколько раз в соответствии с требованиями.

Поделиться
  • 0
    «window.onload - это функция» неверно, поскольку @ Илья-Зеленько демонстрирует, что это свойство, а не функция. Подробности: developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/…, тогда как .ready () является функцией и ожидает обработчик.
0

Событие jQuery document.ready() будет вызываться после загрузки DOM, т.е. он не будет ждать загрузки ресурсов, например изображений. Следовательно, функции в событии jQuery ready будут выполняться после загрузки структуры HTML, не дожидаясь ресурсов. Пока событие body.onload() будет вызвано после того, как все связанные ресурсы и изображения будут полностью загружены.

Цель готового события состоит в том, что он должен появляться как можно раньше после загрузки документа, чтобы мы могли сразу добавить функциональность или обработчики событий в элементы html, не дожидаясь загрузки всей страницы. Мы можем иметь несколько document.ready() на странице, но событие Body.Onload() не может.

Поделиться
0

Когда вы скажете $(document).ready(f), вы скажете скриптному движку сделать следующее:

  1. получить документ объекта и нажать его, так как он не в локальной области, он должен искать хеш-таблицу, чтобы найти, где находится документ, к счастью, документ глобально связан, поэтому он является единственным поиском.
  2. найдите объект $ и выберите его, так как он не находится в локальной области, он должен выполнить поиск хеш-таблицы, который может иметь или не иметь коллизий.
  3. найти объект f в глобальной области видимости, который представляет собой другой поиск в хэш-таблице, или нажать объект функции и инициализировать его.
  4. вызов ready выбранного объекта, который включает в себя другой поиск хеш-таблицы в выбранном объекте, чтобы найти метод и вызвать его.
  5. сделанный.

В лучшем случае это два поиска хеш-таблиц, но это игнорирует тяжелую работу, выполняемую jQuery, где $ - кухонная раковина всех возможных входов в jQuery, поэтому, вероятно, другая карта отправит запрос на исправление обработчика.

В качестве альтернативы вы можете сделать следующее:

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

который будет

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

В лучшем случае это стоит один поиск таблицы хэш-таблицы, что необходимо, потому что нужно onload нагрузку.

В идеале, jQuery будет компилировать свои запросы к строкам, которые можно вставить, чтобы делать то, что вам нужно, чтобы jQuery, но без диспетчеризации jQuery во время выполнения. Таким образом, у вас есть возможность либо

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

Ещё вопросы

Сообщество Overcoder
Наверх
Меню