Jak wykonać funkcję, gdy strona jest w pełni załadowana?

306

Po pełnym załadowaniu strony muszę wykonać kod JavaScript. Dotyczy to np. Obrazów.

Wiem, że możesz sprawdzić, czy DOM jest gotowy, ale nie wiem, czy jest tak samo, jak po pełnym załadowaniu strony.

javascript Ben Shelock
źródło
7
Jak więc sprawdzić, czy DOM jest gotowy?
Mads Skjern

Odpowiedzi:

441

To się nazywa load. Nadeszła chwila, zanim DOM gotowy był na miejscu, a DOM gotowy został stworzony właśnie z tego samego powodu, który loadczekał na obrazy.

window.addEventListener('load', function () {
  alert("It's loaded!")
})
Matchu
źródło
3
więc tylko dla wyjaśnienia (jeśli mogę), w porównaniu do DOM ready, window.onloadjest wywoływany, gdy każdy element strony / zasób (tj. * w tym * obrazy). Czy mam rację?
BreakPhreak
19
@BreakPhreak: tak :) onloadczeka na wszystkie zasoby, które są częścią dokumentu. Wyklucza to oczywiście żądania tworzone dynamicznie, które nie są częścią samego dokumentu, np. Żądanie AJAX.
Matchu
3
skrypt nie jest w pełni załadowany
HD ..
Co się stanie, jeśli mój skrypt może zostać załadowany dynamicznie, a zdarzenie „load” wystąpi przed dodaniem modułu obsługi?
pamelus,
31
Lepszym sposobem byłoby addEventListener("load", function(){… })zamiast nadpisywania onloadwłaściwości.
user4642212,
30

Zwykle możesz z niego korzystać window.onload, ale możesz zauważyć, że najnowsze przeglądarki nie uruchamiają się, window.onloadgdy używasz przycisków historii wstecz / do przodu.

Niektóre osoby sugerują dziwne zniekształcenia, aby obejść ten problem, ale tak naprawdę, jeśli window.onunloadutworzysz moduł obsługi (nawet taki, który nic nie robi), to zachowanie buforowania zostanie wyłączone we wszystkich przeglądarkach. MDC dokumentuje tę „funkcję” całkiem dobrze, ale z jakiegoś powodu nadal istnieją osoby korzystające setIntervali inne dziwne hacki.

Niektóre wersje Opery zawierają błąd, który można obejść, dodając następujące elementy na stronie:

<script>history.navigationMode = 'compatible';</script>

Jeśli po prostu próbujesz uzyskać funkcję javascript o nazwie raz na widok (i niekoniecznie po zakończeniu ładowania DOM), możesz zrobić coś takiego:

<img src="javascript:location.href='javascript:yourFunction();';">

Na przykład używam tej sztuczki, aby wstępnie załadować bardzo duży plik do pamięci podręcznej na ekranie ładowania:

<img src="bigfile"
onload="this.location.href='javascript:location.href=\'javascript:doredir();\';';doredir();">
geocar
źródło
Czy ktoś może wyjaśnić, jak działa ta sztuczka ? Zbyt skomplikowane dla mnie, doh ...
Razzle
20

Ze względu na kompletność możesz również powiązać go z DOMContentLoaded, który jest obecnie szeroko obsługiwany

document.addEventListener("DOMContentLoaded", function(event){
  // your code here
});

Więcej informacji: https://developer.mozilla.org/en-US/docs/Web/Events/DOMContentLoaded

murb
źródło
7
Ta odpowiedź jest dokładnie przeciwna do pytania zadanego w pytaniu.
Muhammad bin Yusrat,
2
Rzeczywiście zdarzenie DOMContentLoaded jest wyzwalane, gdy cała zawartość DOM zostanie załadowana, zanim załaduje wszystkie swoje zależności. Ponieważ użytkownicy w wątku odpowiedzi, do $.readyktórych się odnosiłem, uważam, że ma to duży wkład. Btw. Chciałbym użyć addEventListener-method również na loadrazie jednak, jak to pozwala mieć wiele wywołań zwrotnych:window.addEventListener("load", function(event){ // your code here });
murb
16

Spróbuj, to działa tylko po załadowaniu całej strony

Przez Javascript

window.onload = function(){
    // code goes here
};

Przez Jquery

$(window).bind("load", function() {
    // code goes here
});
absiddiqueLive
źródło
1
$(window)sprawia, że ​​myślę, że to byłaby jquery - prawda? A może mylę się w składni javascript? (Jestem nowy w JS).
Azendale,
2
dlaczego nie użyć po prostu, $(document).ready();gdy jQuery jest dostępny?
Andreas
twój jest dokumentem (mniej więcej tylko przeanalizowany HTML), drugi („ładuj”) to wszystko, w tym obrazy i style. Zależy od tego, czego potrzebujesz.
amenthes
11

Wypróbuj ten kod

document.onreadystatechange = function () {
  if (document.readyState == "interactive") {
    initApplication();
  }
}

odwiedź https://developer.mozilla.org/en-US/docs/DOM/document.readyState, aby uzyskać więcej informacji

Jacob Nelson
źródło
Tak, to jest pomocne. Wielkie dzięki ~
Bravo Yeung
2
"interactive"nie jest w pełni załadowany. "complete"jest w pełni załadowany
Ryan Walker,
W końcu! Dzięki milionowi, Jacob. Wszystkie wymienione tutaj liczne metody zawiodły (w najlepszym wypadku przycisk radiowy zostałby zaktualizowany, a wynikowe obliczenia mogłyby zostać wykonane, ale przycisk nie pojawiłby się naciśnięty), Twoja metoda załatwia sprawę.
sek.
8

Zdarzenie window.onload zostanie uruchomione, gdy wszystko zostanie załadowane, w tym obrazy itp.

Chciałbyś sprawdzić stan gotowości DOM, jeśli chcesz, aby kod js był wykonywany tak wcześnie, jak to możliwe, ale nadal potrzebujesz dostępu do elementów DOM.

codefly
źródło
8

JavaScript korzystający ze onLoad()zdarzenia poczeka na załadowanie strony przed wykonaniem.

<body onload="somecode();" >

Jeśli używasz funkcji gotowości dokumentów środowiska jQuery, kod zostanie załadowany, gdy tylko DOM zostanie załadowany, a przed załadowaniem zawartości strony:

$(document).ready(function() {
    // jQuery code goes here
});
Defoncesko
źródło
7

Możesz użyć window.onload , ponieważ dokumenty wskazują, że nie został uruchomiony, dopóki DOM nie będzie gotowy, a WSZYSTKIE inne zasoby na stronie (obrazy itp.) Zostaną załadowane.

Marc Nowakowski
źródło
Ach genialnie. Dobrze to zrobiłem. Ostatni obraz na stronie to: <img src = "imdbupdate.php? Update = ajax" style = "display: hidden" onload = "window.location = 'movies.php? Do = admincp'" /> Jednak to nie przekierowuje mnie
Ben Shelock
...co? Chcesz przekierować po załadowaniu obrazu?
Matchu
Nie jestem pewien, dlaczego tego chcesz, ale powodem, dla którego nie przekierowuje, może być wyświetlanie: ukryty, a zatem przeglądarka nie zadaje sobie trudu, aby go załadować, ponieważ nie zostanie wyświetlony.
Matchu
może to tylko ukryty obraz, który robi coś ważnego na serwerze, na przykład śledzi trafienie lub robi coś w bazie danych?
Marc Novakowski
Mogę to zdobyć, ale przekierowanie po nie ma dla mnie sensu. Dlaczego w ogóle masz tę stronę, jeśli nie chcesz, aby użytkownik spędzał na niej czas? A jeśli celem jest przekierowanie przy ładowaniu, dlaczego nie użyć zdarzenia window.onload, ponieważ ogólnie jest to czystsza implementacja?
Matchu
3

A oto jak to zrobić za pomocą PrototypeJS :

Event.observe(window, 'load', function(event) {
    // Do stuff
});
Mark Biek
źródło
2

W nowoczesnych przeglądarkach z nowoczesnym javascript (> = 2015) możesz dodać type="module"do tagu skryptu, a wszystko w tym skrypcie zostanie wykonane po załadowaniu całej strony. na przykład:

<script type="module">
  alert("runs after") // Whole page loads before this line execute
</script>
<script>
  alert("runs before")
</script>

również starsze przeglądarki zrozumieją nomoduleatrybut. Coś takiego:

<script nomodule>
  alert("tuns after")
</script>

Aby uzyskać więcej informacji, odwiedź javascript.info .

Pouria Moosavi
źródło
1

Jeśli trzeba użyć wielu onloadużycie $(window).loadzamiast (jQuery):

$(window).load(function() {
    //code
});
Sebastien Horin
źródło
1

Właściwość onload mieszanki GlobalEventHandlers to moduł obsługi zdarzenia zdarzenia load okna, elementu XMLHttpRequest, elementu itp., Który jest uruchamiany po załadowaniu zasobu.

Więc w zasadzie javascript ma już metodę onload na oknie, która wykonuje, która strona jest w pełni załadowana, w tym obrazy ...

Możesz coś zrobić:

var spinner = true;

window.onload = function() {
  //whatever you like to do now, for example hide the spinner in this case
  spinner = false;
};
Alireza
źródło
-1

Aktualizacja 2019: To była odpowiedź, która zadziałała dla mnie. Ponieważ potrzebowałem wielu żądań ajax, aby najpierw odpalić i zwrócić dane, aby policzyć elementy listy. 

$(document).ajaxComplete(function(){
       alert("Everything is ready now!");
});
norcal johnny
źródło