JavaScript Poczekaj, aż strona się załaduje

Odwiedzane strony internetowe lub witryny często pozwalają użytkownikowi czekać na wyświetlenie ważnej wiadomości lub ostrzeżenia przed uzyskaniem dostępu do konkretnego komponentu. Na przykład, prosząc użytkownika o zakup członkostwa lub zalogowanie się przed uzyskaniem dostępu do treści witryny lub odpowiedniego zarządzania ruchem w przypadku stron internetowych edukacyjnych. W takich przypadkach możesz pozwolić użytkownikowi poczekać na stronę, aż zostanie załadowana.

Ten blog omówi metodologie, które można użyć do ustawiania czasu ładowania strony w JavaScript.

Jak czekać na załadowanie strony w JavaScript?

Możesz poczekać, aż strona załaduje się w JavaScript, używając następujących podejść:

• • zdarzenie okna z „settimeout ()" metoda
  • zdarzenie okna z „setInterval ()" metoda
  • "addEventListener ()" metoda

Wspomniane koncepcje zostaną zademonstrowane jeden po drugim!

Metoda 1: Poczekaj, aż strona załaduje się w JavaScript za pomocą Window.zdarzenie onload z metodą settimeout ()

„„okno.Onload„Zdarzenie ma miejsce, gdy okno zostało załadowane, a„settimeout ()”Metoda wywołuje funkcję po określonym czasie ustawionym. Mówiąc dokładniej, podejścia te można połączyć, aby załadować okno po określonym czasie oczekiwania.

Składnia

Settimeout (funkcja, milisekund)

W podanej składni funkcja odnosi się do dostępnej funkcji „Waitload ()”, A milisekund wskazuje„Ustaw czas„W milisekundach.

Poniższy przykład pokazuje podaną koncepcję.

Przykład

Po pierwsze, skorzystaj z „okno.Onload„Wydarzenie wraz z„settimeout ()”Metoda załadowania okna po ustawianiu czasu w milisekundach. Określony czas oczekiwania zostanie zastosowany do funkcji Waitload ():

okno.onload = settimeout (Waitload, 3000)

Teraz zdefiniuj funkcję o nazwie „Waitload ()”W tagu. Ta konkretna funkcja będzie dostępna po obciążeniu okna i powiadom użytkownika następującym komunikatem odpowiednio za pomocą modelu obiektu Dokument (DOM):

Funkcja Waitload ()
alarm („Załadowany!")
dokument.Napisz („Ta strona jest teraz załadowana!")
;

Można zauważyć, że strona jest ładowana po określonym czasie oczekiwania na 3 sekundy:

Jeśli chcesz wielokrotnie załadować stronę po określonym czasie oczekiwania, skorzystaj z następującej metody.

Metoda 2: Poczekaj, aż strona załaduje się w JavaScript za pomocą Window.zdarzenie onload za pomocą metody setInterval ()

„„okno.Onload”Wydarzenie, jak omówiono powyżej, jest wyzwalane po załadowaniu okna. „„setInterval ()”Metoda wiąże się z określoną funkcją wielokrotnie w określonych odstępach czasu obliczonych w milisekundach.

Składnia

setInterval (funkcja, milisekund)

Tutaj "funkcjonować”Odnosi się do funkcji, którą należy wykonać i„milisekund”To ustalony przedział czasu.

Przykład

W poniższym przykładzie ustawimy przedział czasu jako argument w określonej funkcji. Wydrukuj konkretną wiadomość za pomocą alertu na DOM po co 3 sekundy, gdy strona jest wielokrotnie załadowana:

okno.onload = setInterval (function ()
alarm („Załadowany!")
dokument.Napisz („Ta strona jest teraz załadowana!")
, 3000);

Wyjście

W wyodrębnionym wyjściu widać, że strona jest ładowana wielokrotnie po określonym czasie oczekiwania.

Metoda 3: Poczekaj, aż strona załaduje się w JavaScript za pomocą metody addEventListener ()

„„addEventListener ()„Metoda stosuje obsługę zdarzeń do dokumentu. Tę metodę można zaimplementować, aby dołączyć określone zdarzenie i załadować stronę po kliknięciu w dowolnym miejscu w DOM.

Składnia

dokument.addEventListener (zdarzenie, funkcja)

W podanej składni „wydarzenie„Odnosi się do wydarzenia, które zostanie uruchomione, i„funkcjonować”Wskazuje na funkcję, która wykonuje pewną funkcjonalność w wyzwalanym zdarzeniu.

Przykład

Najpierw załączymy wydarzenie „Kliknij”Do dokumentu za pomocą metody addEventListener (). Po uruchomieniu określonego zdarzenia funkcja o nazwie „Waitload ()”Zostanie wykonane:

dokument.addEventListener („kliknij”, Waitload)

Zdefiniuj funkcję „Waitload ()”, W którym wyświetlają następującą wiadomość na DOM na wyzwalonym wydarzeniu:

Funkcja Waitload ()
dokument.Napisz („Strona jest teraz załadowana!");

W tym konkretnym wyjściu strona jest ładowana po kliknięciu kursora w dowolnym miejscu w DOM:

Skompilowaliśmy różne metody czekające na załadowanie strony.

Wniosek

Aby poczekać, aby załadować stronę w JavaScript, użyj okno.Onload wydarzenie z „settimeout ()„Metoda, z„setInterval ()”Metoda lub„addEventListener ()" metoda. Okno.zdarzenie ONLOAD z metodą Settimeout () służy do załadowania strony po określonym czasie, podczas gdy za pomocą metody setInterval () strona ładuje się wielokrotnie po konkretnym przedziale czasowym. Metodę addEventListener () można zastosować w celu dołączenia zdarzenia i załadowania strony, gdy tylko zdarzenie zostanie uruchomione na DOM. W tym artykule ilustruje metody oczekiwania na załadowanie strony w JavaScript.