Różnica między funkcjami $ (okno) .load () i $ (dokument) .ready ()

216

Jaka jest różnica między $(window).load(function() {})i $(document).ready(function() {})w jQuery?

jquery Satya
źródło

Odpowiedzi:

266
  • document.readyjest zdarzeniem jQuery, uruchamia się, gdy DOM jest gotowy, np. wszystkie elementy można znaleźć / wykorzystać, ale niekoniecznie całą zawartość .
  • window.onloadodpala później (lub w tym samym czasie w najgorszych / nieudanych przypadkach), gdy obrazy są ładowane, więc jeśli na przykład używasz wymiarów obrazu, często chcesz tego użyć.
Nick Craver
źródło
38
skrótem $(document).ready(function(){})jest $(function(){})i kolejna ważna różnica w stosunku do window.load jest to, że będzie on działać na WSZYSTKICH przyszłych wywołaniach funkcji, nawet po początkowym DOMready.
Michael Butler
2
@dbliss Tak, uważam, że onload jest skrótem $(window).on('load'). Oba odwołują się do zdarzenia ładowania .
Wolny Lancer
5
@MichaelButler - Co masz na myśli it will run on ALL future calls of the function?
BornToCode
7
@MichaelButler: Musisz być bardziej przejrzysty w swoim komentarzu. 1) Mówisz o tym, że USER wykonuje więcej $(document).readykodu, gdy DOM jest gotowy. Jest to tak mały przypadek użycia, że ​​prawdopodobnie nie warto było mylić wszystkich ze wspomnianiem o nim. 2) ŚRODOWISKO wywołuje tylko $(document).ready(f‌​unction(){})raz, gdy DOM jest gotowy. Jeśli z jakiegoś powodu użytkownik wykona więcej $(document).readypo DOM, to tak, zostanie on natychmiast wykonany.
Doug S
4
Zaczynam się różnić, Michael. Po prostu zostawmy to w tym miejscu i nie przekształcajmy się w bezużyteczne komentarze. Przynajmniej zmieszani ludzie mają teraz swoją odpowiedź.
Doug S
73 
$(document).ready(function() {
 // executes when HTML-Document is loaded and DOM is ready
 alert("document is ready");
});


$(window).load(function() {
 // executes when complete page is fully loaded, including all frames, objects and images
 alert("window is loaded");
});
SagarPPanchal
źródło
22

$(window).load()Nie jest dostępna w jQuery 3.0

$( window ).load(function() {
        // Handler for .load() called.
});

Aby go obejść, możesz użyć go jako „załącznika obsługi zdarzeń” 

$( window ).on("load", function() {
        // Handler for .load() called.
});
Kean Amaral
źródło
14

Różnica polega na:

$(document).ready(function() { to zdarzenie jQuery, które jest uruchamiane po załadowaniu DOM, więc jest uruchamiane, gdy struktura dokumentu jest gotowa.

$(window).load() zdarzenie jest uruchamiane po załadowaniu całej treści.

Bharat Chodvadiya
źródło
9 
<html>
<head>
    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
    <script>
    $( document ).ready(function() {
        alert( "document loaded" );
    });

    $( window ).load(function() {
        alert( "window loaded" );
    });
    </script>
</head>
<body>
    <iframe src="http://stackoverflow.com"></iframe>
</body>
</html>

Window.load zostanie uruchomiony po załadowaniu całej zawartości elementu iframe

Shaik Rasool
źródło
7

$(document).ready dzieje się, gdy wszystkie elementy są obecne w DOM, ale niekoniecznie cała zawartość.

$(document).ready(function() {
    alert("document is ready");
});

window.onloadlub $(window).load()dzieje się po załadowaniu wszystkich zasobów treści (obrazów itp.).

$(window).load(function() {
    alert("window is loaded");
});
Purvik Dhorajiya
źródło
0

document.ready (jQuery) document.ready zostanie wykonany zaraz po załadowaniu właściwości dokumentu HTML, a DOM jest gotowy.

DOM: Document Object Model (DOM) to wieloplatformowa i niezależna od języka konwencja do reprezentowania i interakcji z obiektami w dokumentach HTML, XHTML i XML.

$(document).ready(function()
{
   // executes when HTML-Document is loaded and DOM is ready
   alert("(document).ready was called - document is ready!");
});

window.load (wbudowany JavaScript) Window.load będzie jednak czekał na pełne załadowanie strony, w tym ramki wewnętrzne, obrazy itp. * window.load to wbudowana metoda JavaScript, wiadomo, że ma pewne dziwactwa w starych przeglądarkach (IE6, IE8, stare wersje FF i Opera), ale ogólnie będą działać we wszystkich.

window.load może być użyty w zdarzeniu onload ciała w ten sposób (ale zdecydowanie sugeruję unikanie mieszania takiego kodu w HTML, ponieważ jest to później źródło nieporozumień):

$(window).load(function() 
{
   // executes when complete page is fully loaded, including all frames, objects and images
   alert("(window).load was called - window is loaded!");
});
Arun Kumar
źródło
0

$ (okno) .load to zdarzenie, które jest uruchamiane, gdy DOM i cała zawartość (wszystko) na stronie jest w pełni załadowana, jak CSS, obrazy i ramki. Jednym z najlepszych przykładów jest to, czy chcemy uzyskać rzeczywisty rozmiar obrazu lub uzyskać szczegółowe informacje na temat tego, czego używamy.

$ (document) .ready () wskazuje, że kod w nim musi zostać wykonany po załadowaniu DOM i przygotowaniu go do manipulowania przez skrypt. Nie będzie czekać na załadowanie obrazów do wykonania skryptu jQuery.

<script type = "text/javascript">
    //$(window).load was deprecated in 1.8, and removed in jquery 3.0
    // $(window).load(function() {
    //     alert("$(window).load fired");
    // });

    $(document).ready(function() {
        alert("$(document).ready fired");
    });
</script>

$ (okno) .load wystrzelił po $ (dokument) .ready ().

$ (okno) .load został przestarzały w wersji 1.8 i usunięty w jquery 3.0

Srikrushna
źródło
0

Myślę, że $(window).loadwydarzenie nie jest obsługiwane przez JQuery 3.x

użytkownik8816619
źródło
1
Zgodnie z dokumentacją zdarzenie $ (okno) .load zostało usunięte w JQuery 3.0
Mathieu VIALES
1
To jest poprawne. Aby obejść ten problem, możesz użyć go jako „załącznika modułu obsługi zdarzeń”: $ (okno) .on („load”, function () {// Program obsługi funkcji .load () wywoływany.});
Kean Amaral,
0

Zgodnie ze zdarzeniami DOM poziomu 2 wydarzenie loadma się uruchamiać document, a nie włączać window. Jednak loadjest zaimplementowany windowwe wszystkich przeglądarkach w celu zapewnienia kompatybilności wstecznej.

Jones Agyemang
źródło