1243

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

javascript jquery dom-events unobtrusive-javascript Vaibhav Jain
źródło

2

możliwy duplikat $ (dokumentu). już ekwiwalent bez jQuery

Kzqai

Większość odpowiedzi tutaj jest nieaktualna. Sposób, w jaki jQuery obecnie implementuje, $().ready()powoduje, że window.onloadczasami się uruchamia .

Shikkediel,

1242

readyZdarzenie po dokument HTML został załadowany, gdy onloadzdarzenie nastąpi później, kiedy cała zawartość (np zdjęć) również został załadowany.

onloadWydarzenie jest standardowym zdarzenie w DOM, gdy readyzdarzenie jest specyficzny dla jQuery. Celem tego readyzdarzenia jest to, że powinno ono nastąpić jak najwcześniej po załadowaniu dokumentu, aby kod, który dodaje funkcjonalność do elementów na stronie, nie musiał czekać na załadowanie całej zawartości.

Guffa
źródło

153

@baptx: Mylisz się. readyWydarzenie jest specyficzny dla jQuery. Korzysta ze DOMContentLoadedzdarzenia, jeśli jest dostępne w przeglądarce, w przeciwnym razie je emuluje. W DOM nie ma dokładnego odpowiednika, ponieważ DOMContentLoadedzdarzenie nie jest obsługiwane we wszystkich przeglądarkach.

Guffa,

18

Ok, ale ten sam wynik istnieje w DOMContentLoaded, być może powinieneś to określić

baptx

55

@baptx: Nie sądziłem, że ma to znaczenie dla pytania, i nadal nie.

Guffa,

17

Dlaczego głosowanie negatywne? Jeśli nie wyjaśnisz, co uważasz za niewłaściwe, nie może poprawić odpowiedzi.

Guffa,

4

Nie ma takiego zdarzenia jak onload. onloadjest nazwą właściwości obiektu, która przechowuje funkcję, która ma zostać wywołana po wyzwoleniu loadzdarzenia.

Scott Marcus,

140

window.onloadjest 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 zapewnia document.ready, który je oddziela i uruchamia się, gdy tylko DOM strony będzie gotowy (nie czeka na obrazy itp.).

$(document).ready(zauważ, że nie jest document.ready , co jest niezdefiniowane) to funkcja jQuery, która zawija i zapewnia spójność następujących zdarzeń:

document.ondomcontentready/ document.ondomcontentloaded- nowe zdarzenie, które jest uruchamiane po załadowaniu DOM dokumentu (może minąć trochę czasu, zanim obrazy zostaną załadowane itp.); znowu nieco inaczej w Internet Explorerze i reszcie świata
i window.onload(który jest zaimplementowany nawet w starych przeglądarkach), który jest uruchamiany, gdy ładuje się cała strona (obrazy, style itp.)

Piskvor opuścił budynek
źródło

16

Występuje tutaj niewielkie nieporozumienie: loadzdarzenie windowjest wdrażane w miarę konsekwentnie we wszystkich przeglądarkach. Problem, który jQuery i inne biblioteki próbują rozwiązać, to ten, o którym wspomniałeś, to znaczy, że loadzdarzenie nie jest uruchamiane, dopóki wszystkie zależne zasoby, takie jak obrazy i arkusze stylów nie zostaną załadowane, co może potrwać długo po całkowitym załadowaniu DOM, renderowane i gotowe do interakcji. Zdarzenie uruchamiane w większości przeglądarek, gdy DOM jest gotowy DOMContentLoaded, nie jest wywoływane DOMContentReady.

Tim Down

2

@ Tim Down: rozsądnie jest tutaj kluczowym słowem; przynajmniej niektóre wąchanie obiektów było kiedyś konieczne, nawet przy onload(istnieją różnice między FF / IE / Opera). Jeśli chodzi o DOMContentLoaded, masz całkowitą rację. Edycja w celu wyjaśnienia.

Piskvor opuścił budynek

Jaki masz na myśli wąchanie obiektów?

Tim Down

1

@Tim Down: Wiem, że Opera go miała , ale wyzwalacz zdarzenia był nieco dziwaczny (aby uruchomić niezawodnie, document.onloadbył użyteczny). Jeśli chodzi o window.onload: window.onload = fn1;window.onload=fn2;- tylko fn2 zostanie wywołane onload. Niektóre darmowe hosty internetowe wstawiają swój własny kod do dokumentów, a czasem blokuje to kod strony.

Piskvor opuścił budynek

1

Czy pisanie „document.ready” jest nieprawidłowe? obiekt dokumentu nie ma gotowej metody, robi to obiekt jQuery, który jest zwracany z wywołania $ (dokument). Jeśli mam rację, edytuj tę odpowiedź, ponieważ jest to bardzo mylące.

A. Sallai,

87

$(document).ready()jest zdarzeniem jQuery. JQuery's$(document).ready()Metoda zostaje wywołana, gdy tylko DOM jest gotowy (co oznacza, że przeglądarka przeanalizowała HTML i zbudowała drzewo DOM). Umożliwia to uruchomienie kodu, gdy tylko dokument będzie gotowy do manipulacji.

Na przykład, jeśli przeglądarka obsługuje zdarzenie DOMContentLoaded (tak jak robi to wiele przeglądarek innych niż IE), uruchomi się w przypadku tego zdarzenia. (Uwaga: zdarzenie DOMContentLoaded zostało dodane tylko do IE w IE9 +).

Można do tego użyć dwóch składni:

$( 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.
Służy do wykonywania JavaScript, gdy DOM jest całkowicie załadowany. Umieść tutaj procedury obsługi zdarzeń.
Może być używany wiele razy.
wymienić $zjQuery po odebraniu „$ nie jest zdefiniowana.”
Nieużywany, jeśli chcesz manipulować obrazami. Użyj $(window).load()zamiast tego.

window.onload()jest natywną funkcją JavaScript. W window.onload()Zdarzenie gdy wszystkie treści na swojej stronie załadowaniu tym DOM (Document Object Model), banerów reklamowych i obrazów. Kolejna różnica między nimi polega na tym, że chociaż możemy mieć więcej niż jedną $(document).ready()funkcję, możemy mieć tylko jedną onloadfunkcję.

James Drinkard
źródło

4

Drobny punkt: Dyskusja na temat IE jest źle sformułowana. Nie jest tak, że IE (8 i wcześniejsze) „nie może bezpiecznie odpalić”, dopóki dokument readyState dokumentu nie zakończy się, ale IE nie miał zdarzenia DOMContentLoaded. Nie chodzi o „bezpieczeństwo”, ale brakującą funkcję w IE, dodaną w IE 9.

ToolmakerSteve

Masz rację, więc zredagowałem odpowiedź, aby odzwierciedlić twój komentarz i dzięki!

James Drinkard

Mówisz „Nie będzie czekać na załadowanie obrazów”. co z innymi plikami, js najważniejsze? Często przed wywołaniem funkcji z innego pliku - muszę wiedzieć, czy jest załadowana.

Darius.V

Jest to zupełnie inny temat, ale jeśli rozumiem, o co pytasz, opiera się on na strukturze strony, w tym kolejności, w jakiej umieszczasz pliki js. Oto link, który bardziej szczegółowo: ablogaboutcode.com/2011/06/14/… HTH, James

James Drinkard

Dlaczego ktoś będzie chciał używać $ (dokument) .ready () wiele razy?

Usman

43

Obciążenie systemu Windows Zdarzenie gdy wszystkie treści na stronie jest w pełni załadowany w tym DOM (Document Object Model) treści i Asynchronous JavaScript , ramek i obrazów . Możesz także użyć body onload =. Oba są takie same; window.onload = function(){}i <body onload="func();">są różne sposoby korzystania z tego samego wydarzenia.

$document.readyZdarzenie funkcji jQuery wykonuje się nieco wcześniej window.onloadi jest wywoływane po załadowaniu DOM (modelu obiektowego dokumentu) na twoją stronę. Nie będzie czekać na pełne załadowanie obrazów, ramek .

Zrobione z następującym artykule: Jak $document.ready()różni się odwindow.onload()

Vivek
źródło

Myślę, że to najlepsza odpowiedź!

Haoyu Chen,

3

Mógłbym się zgodzić, gdyby nie było kopiowane słowo w słowo.

Kevin B,

23

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

Rozwiń fragment kodu

dev4092
źródło

22

Uwaga dotycząca korzystania $(document).ready()z Internet Explorera. Jeśli żądanie HTTP zostanie przerwane przed załadowaniem całego dokumentu (na przykład, gdy strona jest przesyłana strumieniowo do przeglądarki, klikane jest inne łącze) IE wyzwoli$(document).ready zdarzenie.

Jeśli jakikolwiek kod w $(document).ready()zdarzeniu odwołuje się do obiektów DOM, istnieje możliwość, że obiekty te nie zostaną odnalezione i mogą wystąpić błędy JavaScript. Zabezpiecz swoje odwołania do tych obiektów lub odrocz kod, który odwołuje te obiekty do zdarzenia window.load.

Nie udało mi się odtworzyć tego problemu w innych przeglądarkach (w szczególności Chrome i Firefox)

pokład
źródło

Która wersja IE? Wiem, że powinienem dbać o kompatybilność, ale z IE jest to trudne. Czy dopuszczalne jest użycie document.ready tylko w języku JavaScript?

Monica,

1

IE6, 7 i 8. Patrz: stackoverflow.com/questions/13185689/...

James Drinkard

22

Mała wskazówka:

Zawsze używajwindow.addEventListener aby dodać zdarzenie do okna. Ponieważ w ten sposób można wykonać kod w różnych programach obsługi zdarzeń.

Poprawny kod:

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

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

Rozwiń fragment kodu

Zły kod:

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

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

Rozwiń fragment kodu

Wynika to z faktu, że onload jest po prostu właściwością obiektu, który jest nadpisywany.

Przez analogię addEventListenerlepiej jest używać $(document).ready()zamiast obciążać.

Илья Зеленько
źródło

3

To nie odpowiada na zadane pytanie.

17

Wydarzenia

$(document).on('ready', handler)wiąże się z gotowym zdarzeniem z jQuery. Program obsługi jest wywoływany podczas ładowania DOM . Brakuje zasobów takich jak obrazy . Nigdy nie zostanie wywołany, jeśli dokument jest gotowy w momencie wiązania. jQuery używa do tego DOMContentLoaded -Event, emulując go, jeśli nie jest dostępny.

$(document).on('load', handler)to zdarzenie, które zostanie uruchomione po załadowaniu wszystkich zasobów z serwera. Obrazy są teraz ładowane. Podczas gdy onload jest nieprzetworzonym zdarzeniem HTML, jest gotowe jQuery buduje .

Funkcje

$(document).ready(handler)jest obietnicą . Program obsługi zostanie wywołany natychmiast, jeśli dokument będzie gotowy w momencie wywołania. W przeciwnym razie wiąże się z ready-Event.

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

Dalsza lektura

abstraktor
źródło

czy możesz wyjaśnić $ (dokument) .load (moduł obsługi) zachowuje się tak samo jak wiązanie ze zdarzeniem load. W przeciwieństwie do $ .fn.ready nie zadzwoni natychmiast?

Nabeel Khan

Myślę, że się zdezorientowałeś, $.fn.loadże nie zachowuje się już jako segregator zdarzeń. W rzeczywistości jest przestarzały od jquery 1.8. Zaktualizowałem go odpowiednio

abstraktor

16

Jest $(document).ready()to zdarzenie jQuery , które występuje, gdy dokument HTML został w pełni załadowany, a window.onloadzdarzenie występuje później, gdy wszystko, łącznie z obrazami na stronie, jest załadowane.

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

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

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

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ż utworzyłem poniższy obraz jako szybkie odniesienia do obu:

Alireza
źródło

1

piękne, odsyłanie do dokumentów to plus. .. dzięki

Irf

13

window.onload: normalne zdarzenie JavaScript.

document.ready: Określone zdarzenie jQuery, gdy cały HTML został załadowany.

Amir Mehdi Delta
źródło

11

Jedną rzeczą do zapamiętania (lub powinienem powiedzieć, przypomnieć) jest to, że nie możesz układać onloadtak, jak możesz ready. Innymi słowy, magia jQuery pozwala na wiele readys na tej samej stronie, ale nie możesz tego zrobić onload.

Ostatni onloadunieważni wszelkie poprzednie onload.

Dobrym sposobem na poradzenie sobie z tym jest funkcja najwyraźniej napisana przez jednego Simona Willisona i opisana w Korzystanie z wielu funkcji ładowania 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 */
});

Donald A Nummer Jr
źródło

11

Document.ready(zdarzenie jQuery) zostanie uruchomione, gdy wszystkie elementy będą na swoim miejscu, i można do nich odwoływać się w kodzie JavaScript, ale treść niekoniecznie jest ładowana. Document.readywykonuje się po załadowaniu dokumentu HTML.

$(document).ready(function() {

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

window.loadJednak będzie czekać na stronę, aby być w pełni załadowany. Obejmuje to ramki wewnętrzne, obrazy itp.

$(window).load(function() {

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

Mike Clark
źródło

5

Zdarzenie document.ready ma miejsce po załadowaniu dokumentu HTML, a plik window.onload zdarzenie występuje zawsze później, gdy cała zawartość (obrazy itp.) załadowana.

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

Na przykład, jeśli wdrażasz wzór „Pokaz slajdów” i musisz wykonać obliczenia na podstawie rozmiarów obrazu, możesz poczekać, aż window.onload . W przeciwnym razie mogą wystąpić pewne losowe problemy, w zależności od szybkości ładowania obrazów. Skrypt działałby równolegle z wątkiem ładującym obrazy. Jeśli twój skrypt jest wystarczająco długi lub serwer jest wystarczająco szybki, możesz nie zauważyć problemu, jeśli zdarzy się, że obrazy dotrą na czas. Ale najbezpieczniejszą praktyką byłoby ładowanie zdjęć.

document.ready może być miłym wydarzeniem dla Ciebie, aby pokazać użytkownikom znak „ładowanie ...” i później window.onload , a następnie możesz ukończyć wszelkie skrypty wymagające załadowanych zasobów, a następnie ostatecznie usunąć znak „Ładowanie ...”.

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;

Nimesh khatri
źródło

2

window.onloadjest wbudowaną funkcją JavaScript. window.onloadwyzwalane po załadowaniu strony HTML. window.onloadmożna napisać tylko raz.

document.readyjest funkcją biblioteki jQuery. document.readywyzwala się, gdy HTML i cały kod JavaScript, CSS i obrazy zawarte w pliku HTML są całkowicie załadowane. document.readymoże być napisane wiele razy zgodnie z wymaganiami.

Amit
źródło

„window.onload is a function” jest niepoprawny, ponieważ @ Илья-Зеленько pokazuje, że jest to właściwość, a nie funkcja. Szczegóły: developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/... natomiast .ready () jest funkcją i oczekuje programu obsługi.

Vik

1

Kiedy mówisz $(document).ready(f), każesz silnikowi skryptowemu wykonać następujące czynności:

pobierz dokument obiektowy i pchnij go, ponieważ nie ma on zasięgu lokalnego, musi przeprowadzić wyszukiwanie tablicy skrótów, aby znaleźć miejsce dokumentu, na szczęście dokument jest globalnie związany, więc jest to pojedyncze wyszukiwanie.
znajdź obiekt $ i wybierz go, ponieważ nie znajduje się on w zasięgu lokalnym, musi przeprowadzić wyszukiwanie tablicy skrótów, która może, ale nie musi mieć kolizji.
znajdź obiekt f w zasięgu globalnym, który jest kolejnym wyszukiwaniem tablicy skrótów, lub obiekt funkcji push i zainicjuj go.
wywołanie readywybranego obiektu, które obejmuje kolejne wyszukiwanie tablicy skrótów w wybranym obiekcie w celu znalezienia metody i wywołania jej.
gotowy.

W najlepszym przypadku są to 2 wyszukiwania tabeli skrótów, ale ignoruje to ciężką pracę wykonaną przez jQuery, gdzie $ jest zlew kuchenny wszystkich możliwych danych wejściowych do jQuery, więc inna mapa prawdopodobnie wyśle zapytanie do poprawnego modułu obsługi.

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 zostało zmienione, ma już wybrany obiekt, więc nic nie trzeba robić.
obiekt funkcji jest wypychany na stos operandu.
sprawdź, czy onloadjest właściwością, czy nie, wykonując wyszukiwanie tablicy skrótów, ponieważ jest ona wywoływana jak funkcja.

W najlepszym przypadku kosztuje to pojedyncze wyszukiwanie tabeli skrótów, co jest konieczne, ponieważ onloadmusi zostać pobrane.

Idealnie byłoby, gdyby jQuery skompilowałoby swoje zapytania do ciągów znaków, które można wkleić, aby zrobić to, co chcesz, aby jQuery było wykonywane, ale bez wysyłania przez jQuery środowiska wykonawczego. W ten sposób masz opcję albo

wykonuj dynamiczną wysyłkę jquery, tak jak my dzisiaj.
Niech jQuery skompiluje zapytanie do czystego ciągu JavaScript, który można przekazać do eval, aby zrobić to, co chcesz.
skopiuj wynik 2 bezpośrednio do swojego kodu i pomiń koszt eval.

Dmitry
źródło

0

Window.onload jest dostarczane przez interfejs API DOM i mówi „zdarzenie load uruchamia się, gdy załadowany zostanie dany zasób”.

„Zdarzenie ładowania uruchamia się na końcu procesu ładowania dokumentu. W tym momencie wszystkie obiekty w dokumencie znajdują się w DOM, a wszystkie obrazy, skrypty, łącza i podramki zostały zakończone.” Obciążenie DOM

Ale w jQuery $ (document) .ready () będzie działać tylko wtedy, gdy strona Document Object Model (DOM) jest gotowa do uruchomienia kodu JavaScript. Nie obejmuje to obrazów, skryptów, ramek iframe itp. Zdarzenie gotowości jquery

Tak więc metoda gotowości jquery będzie działać wcześniej niż zdarzenie dom onload.

andyCao
źródło

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

Odpowiedzi:

Mała wskazówka:

Wydarzenia

Funkcje

Dalsza lektura