okno.onload vs $(document).gotowe()

Question

okno.onload vs $(document).gotowe()

Jakie są różnice między JavaScript window.onload i jQuery $(document).ready() metoda?

1102

javascript jquery javascript-events unobtrusive-javascript

Author: Peter Mortensen, 2010-09-13

Source

15 answers

window.onload jest wbudowanym zdarzeniem JavaScript, ale ponieważ jego implementacja miała subtelne dziwactwa w różnych przeglądarkach (Firefox, Internet Explorer 6, Internet Explorer 8 i Opera ), jQuery dostarcza document.ready, które abstrakuje je i uruchamia się, gdy TYLKO STRONA DOM jest gotowa (nie czeka na obrazy itp.).

$(document).ready (zauważ, że to Nie document.ready, która jest niezdefiniowana) jest funkcją jQuery, która zapewnia spójność do następujących wydarzenia:

document.ondomcontentready / document.ondomcontentloaded - Zdarzenie newish, które zostanie wywołane po załadowaniu DOM dokumentu (co może upłynąć trochę czasu przed obrazami itp. w przeglądarce Internet Explorer i w pozostałej części świata (23]}
i window.onload (które są zaimplementowane nawet w starych przeglądarkach), które są uruchamiane po załadowaniu całej strony (obrazów, stylów, itp.)

124

Author: Piskvor,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2016-04-11 21:26:10

$(document).ready() jest wydarzeniem jQuery. Metoda $(document).ready() JQuery jest wywoływana, gdy tylko DOM jest gotowy (co oznacza, że przeglądarka przetworzyła HTML i zbudowała drzewo DOM). Pozwala to na uruchomienie kodu, gdy tylko dokument będzie gotowy do manipulacji.

Na przykład, jeśli przeglądarka obsługuje zdarzenie DOMContentLoaded (tak jak wiele innych przeglądarek innych niż IE), to zostanie uruchomiona w tym zdarzeniu. (Zauważ, że zdarzenie DOMContentLoaded zostało dodane tylko do IE w IE9+.)

Można użyć dwóch składni za to:

$( document ).ready(function() {
   console.log( "ready!" );
});

Lub wersja skrócona:

$(function() {
   console.log( "ready!" );
});

Główne punkty dla $(document).ready():

nie będzie czekać na załadowanie obrazów.
używany do wykonywania JavaScript, gdy DOM jest całkowicie załadowany. Umieść procedury obsługi zdarzeń tutaj.
może być używany wiele razy.
Zastąp $ przez jQuery, Gdy otrzymasz "$ nie jest zdefiniowane."
nie używany, jeśli chcesz manipulować obrazami. Zamiast tego użyj $(window).load().

window.onload() jest rodzimą Funkcja JavaScript. Zdarzenie window.onload() zostanie wywołane po załadowaniu całej zawartości strony, w tym modelu DOM( document object model), banerów reklamowych i obrazów. Inną różnicą między nimi jest to, że chociaż możemy mieć więcej niż jedną funkcję $(document).ready(), możemy mieć tylko jedną funkcję onload.

80

Author: James Drinkard,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-01-11 14:11:32

A Windows load zdarzenie zostanie wywołane, gdy cała zawartość strony zostanie w pełni załadowana, w tym zawartość DOM (document object model) i asynchroniczny JavaScript, ramki i obrazy . Możesz również użyć body onload=. Oba są takie same; window.onload = function(){} i <body onload="func();"> są różnymi sposobami użycia tego samego zdarzenia.

JQuery $document.ready funkcja event jest wykonywana nieco wcześniej niż window.onload i jest wywoływana po załadowaniu DOM(Document object model) na stronie. Nie będzie czekać dla obrazów , ramki, aby uzyskać pełne obciążenie .

Zaczerpnięte z następującego artykułu: czym $document.ready() różni się od window.onload()

39

Author: Vivek,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2016-06-30 18:24:39

Uwaga na używanie {[0] } z Internet Explorerem. Jeśli żądanie HTTP zostanie przerwane Przed cały dokument zostanie załadowany (na przykład, gdy strona jest przesyłana strumieniowo do przeglądarki, kliknięty jest inny link), IE uruchomi Zdarzenie $(document).ready.

Jeśli jakikolwiek kod w zdarzeniu $(document).ready() odwołuje się do obiektów DOM, istnieje możliwość, że obiekty te nie zostaną znalezione i mogą wystąpić błędy Javascript. Albo strzeż swoich odniesień do tych obiektów, albo odstaw kod, który odwołuje te obiekty do okna.załaduj Zdarzenie.

Nie byłem w stanie odtworzyć tego problemu w innych przeglądarkach (konkretnie Chrome i Firefox)

21

Author: deck,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2012-08-27 19:34:30

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

Author: dev4092,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-11-21 05:24:48

Wydarzenia

$(document).on('ready', handler) wiąże Zdarzenie ready z jQuery. Funkcja obsługi jest wywoływana , gdy DOM jest załadowany . Zasoby, takie jak obrazy, być może nadal brakuje . Nigdy nie zostanie wywołany, jeśli dokument jest gotowy w momencie wiązania. jQuery używa Domcontent-Event for that, emuling it if not available.

$(document).on('load', handler) jest to zdarzenie, które zostanie wywołane po załadowaniu wszystkich zasobów z serwera. Obrazy są ładowane. While onload jest surowym zdarzeniem HTML, ready jest zbudowany przez jQuery.

Funkcje

$(document).ready(handler) w rzeczywistości jest obietnicą . obsługa zostanie wywołana natychmiast, jeśli dokument jest gotowy w momencie wywołania. W Przeciwnym Razie wiąże się ze zdarzeniem ready.

Przed jQuery 1.8, $(document).load(handler) istnieje jako alias $(document).on('load',handler).

Czytaj Dalej

15

Author: abstraktor,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2016-04-11 21:32:48

$(document).ready() to zdarzenie jQuery , które występuje, gdy dokument HTML został w pełni załadowany, podczas gdy zdarzenie window.onload występuje później, gdy wszystko, w tym obrazy na stronie załadowane.

Również okno.onload jest czystym zdarzeniem javascript w DOM, podczas gdy zdarzenie $(document).ready() jest metodą w jQuery.

$(document).ready() jest zwykle wrapperem dla jQuery, aby upewnić się, że wszystkie załadowane elementy mają być używane w jQuery...

Spójrz na kod źródłowy jQuery, aby zrozumieć, jak to jest praca:

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

Również stworzyłem poniższy obrazek jako szybkie odniesienia dla obu:

12

Author: Alireza,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2018-03-27 11:12:15

Okno.onload: normalne Zdarzenie JavaScript.

Dokument.gotowe: specyficzne Zdarzenie jQuery, gdy cały HTML został załadowany.

11

Author: Amir Mehdi Delta,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2016-04-11 21:26:53

Document.ready (Zdarzenie jQuery) uruchomi się, gdy wszystkie elementy są na miejscu i mogą być odwołane w kodzie JavaScript, ale zawartość nie musi być załadowana. Document.ready wykonuje po załadowaniu dokumentu HTML.

$(document).ready(function() {

    // Code to be executed
    alert("Document is ready");
});

The window.load będzie jednak czekać na pełne załadowanie strony. Dotyczy to ramek wewnętrznych, obrazów itp.

$(window).load(function() {

    //Fires when the page is loaded completely
    alert("window is loaded");
});

11

Author: Mike Clark,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2016-04-11 21:37:45

Jedną rzeczą do zapamiętania (a raczej przypomnienia) jest to, że nie możesz układać onload tak, jak możesz z ready. Innymi słowy, jQuery magic pozwala na wiele ready s na tej samej stronie, ale nie możesz tego zrobić za pomocą onload.

Ostatni onload unieważni wszystkie poprzednieonload s.

Dobrym sposobem na poradzenie sobie z tym jest funkcja najwyraźniej napisana przez niejakiego Simona Willisona i opisana w Korzystanie z wielu funkcji onload 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

Author: Donald A Nummer Jr,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2016-04-11 21:29:41

Dokument.Zdarzenie ready występuje, gdy dokument HTML został załadowany, a zdarzenie window.onload występuje zawsze później, gdy cała zawartość (obrazy, itp.) została załadowana.

Możesz użyć zdarzenia document.ready, jeśli chcesz interweniować "wcześnie" w procesie renderowania, bez czekania na załadowanie obrazów. Jeśli potrzebujesz gotowych obrazów (lub innych "treści"), zanim skrypt "zrobi coś", musisz poczekać do window.onload.

Na przykład, jeśli realizujesz " pokaz slajdów" wzorzec i musisz wykonać obliczenia na podstawie rozmiarów obrazu, możesz poczekać do window.onload. W przeciwnym razie mogą wystąpić przypadkowe problemy, w zależności od tego, jak szybko obrazy zostaną załadowane. Twój skrypt będzie działał jednocześnie z wątkiem, który ładuje obrazy. Jeśli skrypt jest wystarczająco długi lub serwer jest wystarczająco szybki, możesz nie zauważyć problemu, jeśli obrazy zdarzy się dotrzeć na czas. Ale najbezpieczniejszą praktyką byłoby pozwolenie na załadowanie obrazów.

document.ready może być miłym wydarzeniem dla ciebie, aby pokazać trochę " ładowania..."podpisz się do użytkowników, a po window.onload, możesz ukończyć wszystkie skrypty, które wymagały załadowania zasobów, a następnie ostatecznie usunąć" Ładowanie..."podpisz.

Przykłady: -

// 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

Author: Nimesh khatri,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2018-07-02 05:20:53

window.onload jest wbudowaną funkcją JavaScript. window.onload WYZWALACZ po załadowaniu strony HTML. window.onload można zapisać tylko raz.

document.ready jest funkcją biblioteki jQuery. document.ready uruchamia, gdy HTML i cały kod JavaScript, CSS i obrazy zawarte w pliku HTML są całkowicie załadowane. document.ready można pisać wiele razy zgodnie z wymaganiami.

2

Author: Amit,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2016-04-11 21:36:17

Mała wskazówka:

Zawsze Użyj window.addEventListener, aby dodać zdarzenie do okna. Ponieważ w ten sposób można wykonać kod w różnych procedurach obsługi zdarzeń .

Poprawny kod:

window.addEventListener('load', function () {
  alert('Hello!')
})

window.addEventListener('load', function () {
  alert('Bye!')
})

Nieprawidłowy kod:

window.onload = function () {
  alert('Hello!') // it will not work!!!
}

window.onload = function () {
  alert('Bye!') 
}

Dzieje się tak dlatego, że onload jest tylko właściwością obiektu, która jest nadpisana.

2

Author: Илья Зеленько,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2018-09-02 15:26:21

Kiedy mówisz $(document).ready(f), mówisz silnikowi skryptu, aby zrobił co następuje:

get the object document and push it, as it ' s not in local scope, it must does a hash table lookup to find where document is, Na szczęście document is globally bound so it is a single lookup.
Znajdź obiekt $ i wybierz go, ponieważ nie znajduje się w zasięgu lokalnym, musi przeszukiwać tabelę hash, która może mieć kolizje, ale nie musi.
Znajdź obiekt f w zasięgu globalnym, który jest innym wyszukiwanie tabeli hash lub obiekt funkcji push i inicjalizacja go.
wywołanie ready wybranego obiektu, które polega na przeszukiwaniu innej tabeli hash do wybranego obiektu w celu znalezienia metody i wywołania jej.
zrobione.

W najlepszym przypadku jest to 2 wyszukiwanie tabeli hash, ale ignoruje to ciężką pracę wykonaną przez jQuery, gdzie $ jest zlewem kuchennym wszystkich możliwych wejść do jQuery, więc inna mapa prawdopodobnie tam wyśle zapytanie do poprawienia handler.

Alternatywnie możesz to zrobić:

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

Które będą

Znajdź okno obiektu w zasięgu globalnym, jeśli JavaScript jest zoptymalizowany, będzie wiedział, że ponieważ okno nie jest zmienione, ma już wybrany obiekt, więc nic nie trzeba robić.
obiekt funkcji jest wciskany na stosie operandu.
sprawdź, czy onload jest właściwością, czy nie, wykonując wyszukiwanie tabeli hash, ponieważ jest, jest wywoływana jak funkcja.

W najlepszym case, to kosztuje wyszukiwanie pojedynczej tabeli hash, co jest konieczne, ponieważ onload musi być pobrane.

Idealnie, jQuery skompilowałby swoje zapytania do ciągów znaków, które można wkleić, aby zrobić to, co chcesz, aby jQuery zrobił, ale bez uruchamiania wysyłania jQuery. W ten sposób Masz opcję

wykonaj dynamiczną wysyłkę jquery, tak jak to robimy dzisiaj.
niech jQuery skompiluje Twoje zapytanie do czystego ciągu JavaScript, który może zostać przekazany do eval, aby zrobić to, co Ty chcę.
skopiuj wynik 2 bezpośrednio do kodu i pomiń koszt eval.

0

Author: Dmitry,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2018-07-02 05:15:50

score 1123 · Accepted Answer

Zdarzenie ready występuje po załadowaniu dokumentu HTML, natomiast Zdarzenie onload występuje później, gdy cała zawartość (np. obrazy) również została załadowana.

Zdarzenie onload jest standardowym zdarzeniem w DOM, podczas gdy zdarzenie ready jest specyficzne dla jQuery. Celem zdarzenia ready jest to, że powinno ono nastąpić jak najwcześniej po załadowaniu dokumentu, tak aby Kod dodający funkcjonalność do elementów strony nie musiał czekać na załadowanie całej zawartości.