it-swarm.com.ru

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

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

1170
Vaibhav Jain

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

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

1175
Guffa

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 (который реализован даже в старых браузерах), который запускается, когда загружается вся страница (изображения, стили и т. д.)
130
Piskvor

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

85
James Drinkard

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

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

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

41
Vivek

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

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

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

22
deck
$(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>
20
dev4092

События

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

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

Функции

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

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

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

16
abstraktor

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

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

13
Илья Зеленько

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

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

12
Amir Mehdi Delta

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

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

enter image description here

12
Alireza

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
Mike Clark

Одна вещь, которую нужно запомнить (или я должен сказать, вспомнить), это то, что вы не можете складывать onloads, как вы можете с ready. Другими словами, jQuery magic позволяет использовать несколько ready на одной странице, но вы не можете сделать это с 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 */
});
10
Donald A Nummer Jr

Событие 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;
5
Nimesh khatri

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

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

2
Amit

Когда вы говорите $(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.
1
Dmitry