События

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

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

Функции

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

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

Дальнейшее чтение

• Время
• О функции ready
• Пример
• Обещает
• Удаленный псевдоним события

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

Также окно. 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;
};

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

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

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

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

В качестве альтернативы вы можете сделать это: [/ g1 6]

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

, который

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

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

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

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

$(document).ready() - событие jQuery. Метод J4uery $(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.

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

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

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

window.onload - встроенная функция JavaScript. window.onload запускается при загрузке страницы HTML. window.onload может быть записана только один раз.

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

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

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

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