Jak uruchomić funkcję, gdy strona jest załadowana do JavaScript?

Wykonanie funkcji JavaScript, gdy strona internetowa została całkowicie załadowana, jest raczej łatwa. Istnieje wiele sposobów osiągnięcia tego zadania, z których niektóre obejmują dodawanie wierszy w znacznikach elementu HTML, a niektóre obejmują użycie funkcji DOM i zmiennych stanu w naszym fragmencie kodu skryptu.

W tym artykule zastosowano następujące metody, aby osiągnąć zadanie:

• Korzystanie z zdarzenia Onload na zmiennej interfejsu Windows
• Umieszczenie atrybutu Onload wewnątrz znacznika
• Definiowanie niestandardowego słuchacza zdarzeń na zmiennej interfejsu okna
• Za pomocą dokumentu.atrybut onReadyStateChange

Zacznijmy od pierwszego.

Metoda 1: zdarzenie Onload Window

Zdarzenie onload () może być używane z dowolnym elementem strony HTML i będzie wykonywać akcje podane w nim po tym, jak ten element został w pełni załadowany. Aby uruchomić funkcję dopiero po całym „okno”Załadowano, użyj„ okna.właściwość onload ”w pliku skryptu i ustaw ją równą funkcji jako

okno.onload = function ()
alert („strona została załadowana”);
;

W funkcji wysyłane jest ostrzeżenie, które mówi, że „strona została załadowana”. Wykonaj stronę HTML i obserwuj następujące wyniki:

Z wyjścia jasno wynika, że ​​funkcja została wykonana po tym, jak przeglądarka całkowicie załadowała „okno” strony internetowej.

Metoda 2: Za pomocą atrybutu Onload z znacznikiem ciała

Ponieważ znacznik ciała zawiera wszystkie te dane wyświetlane w przeglądarce internetowej, w ten sposób umieszczanie atrybutu Onload i ustawienie go równej funkcji, w tym znaczniku oznaczałoby wykonywanie funkcji po tym, jak wszystko na stronie internetowej zostało w pełni załadowane.

Na przykład utwórz stronę HTML z tymi wierszami:

alt = ""
/>

Jak uruchomić funkcję, gdy strona jest załadowana do JavaScript ?

To jest przykład atrybutu Onload Body Load

Kluczową kwestią jest to, że w ciele użyliśmy atrybutu onload = „w pełni ładowany ()”. Spowoduje to, że strona internetowa będzie szukać „w pełni załadowany()”Funkcja w skrypcie po załadowaniu wszystkich elementów na stronie internetowej.

Wejdź do pliku skryptu i dodaj następujące wiersze:

funkcja w pełni ładowana ()
Alert („Strona internetowa została całkowicie załadowana!");

Wykonaj HTML, a wyjście w przeglądarce będzie wyglądało tak:

Użytkownik jest wyświetlany monitem po znaczniku ciała, a wszystkie elementy wewnątrz znacznika ciała zostały w pełni załadowane.

Metoda 3: Dodanie słuchacza zdarzeń na zmiennej interfejsu „okna”

Jedna z najstarszych metod, ale wciąż skuteczna. W pliku JavaScript po prostu dodaj słuchacz zdarzeń za pomocą operatora DOT za pomocą naszego „okno„Zmienna interfejsu. Stan wewnątrz słuchacza wydarzenia będzie „obciążenie”I po tej zmianie stanu zdefiniuj funkcję, którą należy wykonać. Wszystko to osiąga się przy użyciu następujących wierszy:

okno.addEventListener („ładuj”, function ()
Alert („Jest załadowany!");
);

Następnie po prostu załaduj stronę internetową HTML w przeglądarce i obserwuj następujące dane wyjściowe:

Użytkownik jest wyświetlany monitem, gdy tylko okno zostanie w pełni załadowane. Zauważ jednak, że ten alert pojawia się, gdy „okno" jest załadowana. Oznacza to, że użytkownik może uzyskać alert, zanim wszystkie elementy całkowicie się załadują.

Metoda 4: Korzystanie z atrybutu dokumentu OnReASTATECHANGE,

DOM ma ten jeden atrybut o nazwie „onReadyStatechange”, Który jest wystrzeliwany za każdym razem, gdy zmienia się stan dokumentu. Można to użyć do wykonania funkcji, ale jedynym problemem jest to, że ta zmienna lub atrybut może zawierać różne stany, takie jak ładowanie, w toku, przetwarzanie i komplet. Wynika to z faktu, że ten atrybut jest najczęściej używany dla żądań XML lub HTML.

Kontrola musi być indukowana, aby wykonać funkcję tylko wtedy, gdy dokument jest w pełni załadowany. Użyj następujących wierszy w pliku JavaScript:

dokument.onReadyStateChange = function ()
if (dokument.ReadyState == "Complete")
Alert („Yahoo!");

;

W powyższym fragmencie kodu należy sprawdzić, czy poszukuje konkretnego stanu „kompletnego” tylko wtedy, gdy użytkownik jest powiadamiany. Uprzeprzecztuj stronę HTML i obserwuj wyjście:

Użytkownik został powiadomiony po tym, jak gotowy stan dokumentu został „zakończony”.

Zakończyć

Istnieje wiele sposobów na wykonanie funkcji JavaScript, gdy tylko strona internetowa całkowicie załaduje. Aby zademonstrować to, w tym artykule, w każdej metodzie użyłeś alarm funkcja pokazująca alert przedstawiający, że strona internetowa wykonała funkcję JavaScript po pełnym załadowaniu tej strony internetowej.