окно.onload vs $(документ).готовый()

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

1102
javascript javascript-events jquery unobtrusive-javascript

15 ответов

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

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

1123

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

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

  • document.ondomcontentready / document.ondomcontentloaded - новое событие, которое срабатывает при загрузке DOM документа (что может быть некоторое время до изображения и т. д. загружаются); опять же, немного отличается в Internet Explorer и в остальном мире
  • и window.onload (который реализован даже в старых браузерах), который срабатывает при загрузке всей страницы (изображения, стили и т. д.)
124

$(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. The window.onload() событие срабатывает, когда все содержимое на Вашей странице загружено, включая DOM (объектную модель документа), рекламные баннеры и изображения. Другое различие между ними заключается в том, что, хотя мы можем иметь более одного .

80

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

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

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

39

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

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

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

21

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

событий

$(document).on('ready', handler) связывает события ready из 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).

далее Чтение

15

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

и окне.onload-это чистое событие javascript в DOM, в то время как $(document).ready() event-это метод в 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

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

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

последние onload отменит все предыдущие onloads.

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

документ.событие 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;
4

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

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

2

маленький совет:

всегда использовать 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-это просто свойство объекта, которое перезаписывается.

2

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