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.
Odpowiedzi:
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!")
})window.onloadjest wywoływany, gdy każdy element strony / zasób (tj. * w tym * obrazy). Czy mam rację?
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.
addEventListener("load", function(){… })zamiast nadpisywania onloadwłaściwości.
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();">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
$.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 });
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
});$(window)sprawia, że myślę, że to byłaby jquery - prawda? A może mylę się w składni javascript? (Jestem nowy w JS).
$(document).ready();gdy jQuery jest dostępny?
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
"interactive"nie jest w pełni załadowany. "complete"jest w pełni załadowany
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
});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.
A oto jak to zrobić za pomocą PrototypeJS :
Event.observe(window, 'load', function(event) {
// Do stuff
});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 .
onloadużycie $(window).loadzamiast (jQuery):$(window).load(function() {
//code
});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;
};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!");
});