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

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

вопрос задан 13.09.2010
Vaibhav Jain
13892 репутация

15 ответов


  • 1122 рейтинг

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

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

    ответ дан Guffa, с репутацией 541823, 13.09.2010
  • 124 рейтинг

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

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

    ответ дан James Drinkard, с репутацией 8969, 20.08.2013
  • 39 рейтинг

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

    - это разные способы использования одного и того же события.

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

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

    ответ дан Vivek, с репутацией 3712, 17.09.2013
  • 21 рейтинг

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

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

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

    ответ дан deck, с репутацией 236, 27.08.2012
  • 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");
    });
    
    
    ответ дан dev4092, с репутацией 1409, 26.02.2014
  • 15 рейтинг

    События

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

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

    Функции

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

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

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

    ответ дан abstraktor, с репутацией 755, 29.11.2013
  • 11 рейтинг

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

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

    ответ дан Amir Mehdi Delta, с репутацией 139, 2.06.2013
  • 10 рейтинг

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

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

    Хороший способ справиться с этим - использовать функцию, написанную, по-видимому, одним Симоном Уиллисоном и описанную в Использование нескольких функций JavaScript Onload .

    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 */
    });
    
    ответ дан Donald A Nummer Jr, с репутацией 942, 7.11.2013
  • 2 рейтинг

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

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

    ответ дан Amit, с репутацией 1159, 24.06.2014