jQuery - Jakie są różnice między $ (dokument) .ready i $ (okno) .load?

Jakie są różnice między

$(document).ready(function(){
 //my code here
});

i

$(window).load(function(){
  //my code here
});

I chcę się upewnić, że:

$(document).ready(function(){

}) 

i

$(function(){

}); 

i

jQuery(document).ready(function(){

});

są takie same.

Czy możesz mi powiedzieć, jakie różnice i podobieństwa między nimi?

$(document).ready(function() {
  // executes when HTML-Document is loaded and DOM is ready
  console.log("document is ready");
});


$(window).load(function() {
  // executes when complete page is fully loaded, including all frames, objects and images
  console.log("window is loaded");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Wersja Query 3.0

Zerwanie zmiany: usunięte .load (), .unload () i .error ()

Te metody są skrótami do operacji zdarzeń, ale miały kilka ograniczeń interfejsu API. Metoda zdarzenia była w .load()konflikcie z .load() metodą ajax . .error()Sposób nie mogą być wykorzystywane ze window.onerror względu na sposób, w jaki sposób DOM zdefiniowane. Jeśli chcesz dołączyć zdarzenia o tych nazwach, użyj .on()metody, np. Zmień $("img").load(fn)na $(img).on("load", fn). ¹

$(window).load(function() {});

Należy zmienić na

$(window).on('load', function (e) {})

Wszystkie są równoważne:

$(function(){
}); 

jQuery(document).ready(function(){
});

$(document).ready(function(){
});

$(document).on('ready', function(){
})

document.readyjest zdarzeniem jQuery, jest uruchamiane, gdy DOM jest gotowy, np. wszystkie elementy znajdują się / znajdują się w użyciu, ale niekoniecznie cała zawartość.
window.onloadodpala później (lub w tym samym czasie w najgorszych / nieudanych przypadkach), gdy obrazy są ładowane. Jeśli więc na przykład używasz wymiarów obrazu, często chcesz go użyć.

Przeczytaj także powiązane pytanie:
Różnica między funkcjami $ (okno) .load () i $ (dokument) .ready ()

Z dokumentu API jQuery

Chociaż JavaScript zapewnia loadzdarzenie do wykonania kodu podczas renderowania strony, to zdarzenie nie jest uruchamiane, dopóki wszystkie zasoby, takie jak obrazy, nie zostaną całkowicie odebrane. W większości przypadków skrypt można uruchomić, gdy tylko hierarchia DOM zostanie w pełni zbudowana. Przekazywana procedura obsługi .ready()gwarantuje, że zostanie wykonana po przygotowaniu modelu DOM, więc zazwyczaj jest to najlepsze miejsce do dołączenia wszystkich innych procedur obsługi zdarzeń i uruchomienia innego kodu jQuery. Podczas korzystania ze skryptów opartych na wartości właściwości stylu CSS ważne jest, aby odwoływać się do zewnętrznych arkuszy stylów lub osadzać elementy stylów przed odwołaniem się do skryptów.

W przypadkach, w których kod opiera się na załadowanych zasobach (na przykład, jeśli wymagane są wymiary obrazu), kod należy loadzamiast tego umieścić w module obsługi zdarzenia.

Odpowiedź na drugie pytanie -

Nie, są identyczne, dopóki nie używasz jQuery w trybie bez konfliktu.

Te trzy funkcje są takie same.

$(document).ready(function(){

}) 

i

$(function(){

}); 

i

jQuery(document).ready(function(){

});

tutaj $służy do definicji jQuerylike $= jQuery.

Teraz różnica jest taka

$(document).readyto zdarzenie jQuery, które jest uruchamiane po DOMzaładowaniu, więc jest uruchamiane, gdy struktura dokumentu jest gotowa.

$(window).load zdarzenie jest uruchamiane po załadowaniu całej zawartości, np. strona zawiera obrazy, css itp.

Różnica między funkcjami $(document).ready()i $(window).load()polega na tym, że kod zawarty w środku $(window).load()będzie działał po załadowaniu całej strony (obrazów, ramek iframe, arkuszy stylów itp.), Podczas gdy zdarzenie gotowości do dokumentu zostanie uruchomione przed załadowaniem wszystkich obrazów, ramek iframe itp., Ale po całym DOM jest gotowy.

$(document).ready(function(){

}) 

i

$(function(){

});

i

jQuery(document).ready(function(){

});

Nie ma różnicy między powyższymi 3 kodami.

Są równoważne, ale możesz napotkać konflikt, jeśli jakiekolwiek inne struktury JavaScript używają tego samego symbolu dolara $ jako nazwy skrótu.

jQuery.noConflict();
jQuery.ready(function($){
 //Code using $ as alias to jQuery
});

Zdarzenie gotowości jest zawsze wykonywane, gdy tylko strona HTML jest załadowana do przeglądarki i funkcje są wykonywane .... Ale zdarzenie ładowania jest wykonywane w momencie, gdy cała zawartość strony jest ładowana do przeglądarki dla strony ... .. możemy użyć $ lub jQuery, gdy używamy metody noconflict () w skryptach jquery ...

$(document).ready(function(e) { 
    // executes when HTML-Document is loaded and DOM is ready  
    console.log("page is loading now"); 
});

$(document).load(function(e) { 
    //when html page complete loaded
    console.log("completely loaded"); 
});

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

$(document).ready(function(){

}) 
//and 
$(function(){

}); 
//and
jQuery(document).ready(function(){

});

Powyżej 3 są takie same, $ to nazwa aliasu jQuery, możesz napotkać konflikt, jeśli inne frameworki JavaScript używają tego samego symbolu dolara $. Jeśli napotkasz konflikt, zespół jQuery zapewni rozwiązanie bez konfliktu czytaj więcej.

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