1245

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

javascript jquery dom-events unobtrusive-javascript Вайбхав Джайн
источник

2

возможный дубликат $ (document). уже эквивалентен без jQuery

Kzqai

Большинство ответов здесь устарели. Способ JQuery в настоящее время реализует $().ready()делает его огонь после того, как window.onloadвремя от времени.

Шиккедиль

1243

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

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

Guffa
источник

153

@baptx: Ты не прав. readyСобытие является специфичны для JQuery. Он использует DOMContentLoadedсобытие, если оно доступно в браузере, иначе оно эмулирует его. В DOM нет точного эквивалента, потому что DOMContentLoadedсобытие поддерживается не во всех браузерах.

Guffa

18

Хорошо, но тот же результат существует с DOMContentLoaded, возможно, вы должны были указать это

baptx

55

@baptx: я не думал, что это будет иметь отношение к вопросу, и я все еще не думаю.

Guffa

17

Почему отрицательный голос? Если вы не объясните, что вы считаете неправильным, это не улучшит ответ.

Guffa

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

@ Вниз: разумно является ключевым словом здесь; по крайней мере, некоторое прослушивание объекта было необходимо, даже с onload(есть различия по FF / IE / Opera). Что касается DOMContentLoaded, вы совершенно правы. Редактирование, чтобы уточнить.

Писквор покинул здание

Какой вид обнюхивания объектов вы имеете в виду?

Тим Даун

1

@ Тим Down: Я знаю , что опера была , но триггер события на нем было немного изворотливый (для запуска надежно, можно document.onloadбыло пользоваться). Что касается window.onload: window.onload = fn1;window.onload=fn2;- только fn2 будет вызываться при загрузке. Некоторые бесплатные веб-хосты вставляют свой собственный код в документы, а иногда это затормаживает код на странице.

Писквор покинул здание

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 и более ранние версии ) «не может безопасно запускаться » до тех пор, пока не будет завершено выполнение документа readyState, а в том, что в IE отсутствует событие DOMContentLoaded. Не вопрос «безопасности», а отсутствующая функция в IE, добавленная в IE 9.

ToolmakerSteve

Вы правы, поэтому я отредактировал ответ, чтобы отразить ваш комментарий и спасибо!

Джеймс Дринкард

Вы говорите: «Это не будет ждать загрузки изображений». а как насчет других файлов, JS наиболее важно? Часто перед вызовом функции из другого файла - мне нужно знать, загружен ли он.

Darius.V

Это вообще другая тема, но если я понимаю, о чем вы спрашиваете, это зависит от того, как вы структурируете свою страницу, включая порядок размещения файлов js. Вот ссылка, которая более подробно описана: ablogaboutcode.com/2011/06/14/… HTH, Джеймс

Джеймс Дринкард,

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

Усман

43

Нагрузки Windows , срабатывает событие , когда все содержимое на странице полностью нагруженные включая DOM (Document Object Model) содержание и асинхронные JavaScript , кадры и изображения . Вы также можете использовать body onload =. Оба одинаковы; 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>

Развернуть фрагмент

dev4092
источник

22

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

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

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

колода
источник

Какая версия IE? Я знаю, что я должен заботиться о совместимости, но это трудно с IE. Допустимо ли использовать document.ready только для JavaScript?

Моника

1

IE6, 7 и 8. См .: stackoverflow.com/questions/13185689/…

Джеймс Дринкард,

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событию.

Перед 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

Irf

13

window.onload: обычное событие JavaScript.

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

Амир Мехти Дельта
источник

11

Одна вещь, которую нужно помнить (или я должен сказать, вспомнить), это то, что вы не можете сложить, onloadкак вы можете с ready. Другими словами, jQuery magic позволяет использовать несколько 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может быть написано несколько раз в соответствии с требованиями.

Amit
источник

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

Вик

1

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

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

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

В качестве альтернативы, вы можете сделать это:

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

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

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

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

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

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

Дмитрий
источник

0

window.onload предоставляется API-интерфейсом DOM и сообщает, что «событие загрузки запускается при загрузке данного ресурса».

«Событие загрузки происходит в конце процесса загрузки документа. На этом этапе все объекты в документе находятся в DOM, и все изображения, сценарии, ссылки и подкадры завершили загрузку». DOM onload

Но в jQuery $ (document) .ready () будет работать только после того, как страница Document Object Model (DOM) будет готова для выполнения кода JavaScript. Это не включает изображения, сценарии, фреймы и т. Д. Событие, готовое к jquery

Таким образом, метод jquery ready будет запущен раньше, чем событие dom onload.

andyCao
источник

window.onload против $ (document) .ready ()

Ответы:

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

Мероприятия

функции

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