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

Question

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

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

15 1102

javascript jquery javascript-events unobtrusive-javascript

15 ответов:

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

80

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

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

взято из следующей статьи: как $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).

далее Чтение

времени

на функцию ready

пример

обещания

удален псевдоним события

15

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

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

12

11

Document.ready (событие jQuery) срабатывает, когда все элементы находятся на месте, и на них можно ссылаться в коде JavaScript, но содержимое не обязательно загружается. Document.ready выполняется при загрузке HTML-документа.
$(document).ready(function() {

    // Code to be executed
    alert("Document is ready");
});
The 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.

хороший способ справиться с этим-это функция, по-видимому, написанная одним Саймоном Уиллисоном и описанная в Использование Нескольких 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), вы говорите script engine сделать следующее:

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

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

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

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

сделано.

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

в качестве альтернативы, вы можете сделать это:
window.onload = function() {...}
что будет

найдите окно объекта в глобальной области, если JavaScript оптимизирован, он будет знать, что поскольку окно не изменено, у него уже есть выбранный объект, поэтому ничего не нужно делать.

объект функции помещается в стек операндов.

проверить, если onload является свойством или нет, выполняя поиск хэш-таблицы, так как это вызывается как функция.

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

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

сделайте динамическую отправку jquery, как мы делаем сегодня.

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

скопируйте результат 2 непосредственно в ваш код и пропустите стоимость eval.

0

Guffa · Accepted Answer · 2014-10-02 19:37:09

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

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