Chcę wywołać funkcję po załadowaniu dokumentu, ale załadowanie dokumentu mogło się jeszcze skończyć lub nie. Jeśli się załadował, mogę po prostu wywołać funkcję. Jeśli się NIE załadował, mogę dołączyć detektor zdarzeń. Nie mogę dodać detektora zdarzeń, gdy onload został już uruchomiony, ponieważ nie zostanie wywołany. Jak więc mogę sprawdzić, czy dokument się załadował? Wypróbowałem poniższy kod, ale nie do końca działa. Jakieś pomysły?
var body = document.getElementsByTagName('BODY')[0];
// CONDITION DOES NOT WORK
if (body && body.readyState == 'loaded') {
DoStuffFunction();
} else {
// CODE BELOW WORKS
if (window.addEventListener) {
window.addEventListener('load', DoStuffFunction, false);
} else {
window.attachEvent('onload', DoStuffFunction);
}
}
javascript
events
onload
addeventlistener
Marcos
źródło
źródło
Odpowiedzi:
Nie ma potrzeby, aby cały kod wspomniany przez galambalazs. Aby to zrobić w czystym JavaScript, wystarczy przetestować
document.readyState
:Tak też robi to jQuery.
W zależności od tego, gdzie ładowany jest JavaScript, można to zrobić w przedziale:
W rzeczywistości
document.readyState
może mieć trzy stany:Więc jeśli potrzebujesz tylko DOM, aby był gotowy, sprawdź
document.readyState === "interactive"
. Jeśli chcesz, aby cała strona była gotowa, w tym obrazy, sprawdźdocument.readyState === "complete"
.źródło
document.readyState == "complete"
to znaczy, że wszystko, łącznie z obrazami, zostało załadowane.document.readyState
aby upewnić się, że funkcja uruchomi się po przeanalizowaniu DOM lub później, w zależności od tego, kiedy została wywołana. Czy jest impreza interaktywnareadyState
?/loaded|complete/.test(document.readyState)
. Niektóre przeglądarki są ustawionedocument.readyState
jako „załadowane” zamiast „zakończone”. Ponadto document.readyState NIE gwarantuje, że czcionki zostały załadowane, nie ma naprawdę dobrego sposobu na przetestowanie tego bez wtyczki.document.onreadystatechange
? Wydaje się to bardziej uproszczone, jeśli obsługują to przeglądarki. stackoverflow.com/questions/807878/…document.readyState !== "loading"
stan „DOM gotowy”. Zapobiega to pojawianiu się problemów, jeśli zreadyState
jakiegoś powodu zostanie sprawdzone z opóźnieniem (po stanie „interaktywnym”).Nie ma potrzeby posiadania biblioteki. Przy okazji, jQuery używał tego skryptu przez jakiś czas.
http://dean.edwards.name/weblog/2006/06/again/
źródło
init
nie będzie działać, jeśli ten kod, który wysłałeś, zostanie uwzględniony po załadowaniu strony, co jest celem OP: nie może kontrolować, kiedy jego skrypt jest dołączony. (pamiętaj, że tylkosetInterval
oddział będzie działał)Prawdopodobnie chcesz użyć czegoś takiego jak jQuery, co ułatwia programowanie w JS.
Coś jak:
Wydaje się, że zrobi to, czego szukasz.
źródło
ready()
zostanie wywołana po załadowaniu dokumentu, przekazana funkcja jest uruchamiana natychmiast.źródło
document.loaded
jest zawsze niezdefiniowanybody.readyState === 'loaded'
Jeśli faktycznie chcesz, aby ten kod działał przy ładowaniu , a nie w domready (tj. Potrzebujesz również ładować obrazy), to niestety funkcja ready nie robi tego za Ciebie. Generalnie robię coś takiego:
Uwzględnij w javascript w dokumencie (tj. Zawsze wywoływane przed uruchomieniem onload):
Następnie twój kod:
(Lub odpowiednik w ramach twoich preferencji.) Używam tego kodu do przygotowania kodu JavaScript i obrazów dla przyszłych stron. Ponieważ to, co otrzymuję, nie jest w ogóle używane na tej stronie, nie chcę, aby miało pierwszeństwo przed szybkim pobieraniem obrazów.
Może jest lepszy sposób, ale jeszcze go nie znalazłem.
źródło
Mozila Firefox twierdzi, że
onreadystatechange
jest to alternatywa dlaDOMContentLoaded
.W
DOMContentLoaded
dokumencie Mozili mówi:Myślę, że
load
wydarzenie powinno być używane do pełnego załadowania dokumentu + zasobów.źródło
Powyższy z JQuery jest najłatwiejszym i najczęściej używanym sposobem. Możesz jednak użyć czystego javascript, ale spróbuj zdefiniować ten skrypt w głowie, aby był czytany na początku. To, czego szukasz, to
window.onload
wydarzenie.Poniżej znajduje się prosty skrypt, który utworzyłem, aby uruchomić licznik. Następnie licznik zatrzymuje się po 10 iteracjach
źródło
Spróbuj tego:
źródło
Mam inne rozwiązanie, moją aplikację trzeba uruchomić przy tworzeniu nowego obiektu MyApp, więc wygląda to tak:
działa na wszystkich przeglądarkach, które znam.
źródło