Jak używać zdarzenia Onload w JavaScript w JavaScript

W JavaScript obraz „Onload”Zdarzenie występuje, gdy obraz jest pomyślnie załadowany na stronie internetowej. Tę funkcję można wykorzystać, gdy musimy ładować obrazy na naszych stronach internetowych, aby były atrakcyjne. Zdjęcie Onload Image jest również używane w opracowywaniu stron internetowych, które wyświetlają obrazy, logo i banery produktów.

W tym artykule wyróżni zdarzenie Onload Image za pomocą JavaScript.

Jak używać zdarzenia obrazu Onload JavaScript?

Możesz użyć następujących metod wykonywania operacji zdarzenia Onload w JavaScript:

• QuerySelelect ()
• Funkcja zdefiniowana przez użytkownika

Teraz przejdziemy przez każde z wymienionych podejść jeden po drugim!

Metoda 1: Użyj zdarzenia Onload w JavaScript z dokumentem.QuerySelelect ()

„„dokument.QuerySelelect ()„Metoda jest stosowana przede wszystkim do zwrócenia pierwszego elementu, który pasuje do określonego selektora w dokumencie. Na przykład można go wykorzystać do zdefiniowania zdarzenia w celu uzyskania dostępu do obrazu z pliku HTML.

Poniższy przykład wykorzysta dokument.Metoda QuerySelelect () do zdefiniowania obrazu na zdarzeniu obciążenia.

Przykład

Najpierw dodamy źródło obrazu „src”W pliku HTML:

Teraz przejdź do pliku JavaScript i zadzwoń do „addEventListener ()”Metoda z obiektem okiennym. Ta metoda zostanie użyta do dodania słuchacza zdarzeń do załadowania pożądanego obrazu za pomocą „dokument.QuerySelelect ()" metoda. Następnie dodaj wyskakujące ostrzeżenie o podanej wiadomości:

okno.addEventListener („ładuj”, event =>
var img = dokument.QuerySelelect („IMG”);
alert („obraz jest załadowany pomyślnie”);
);

Na koniec określ źródło pliku JavaScript w znaczniku głowy lub nadwozia:

Otwarcie danego pliku HTML wyświetli następujące dane wyjściowe:

Po załadowaniu wybranego obrazu pojawi się również następujące pole alertu z komunikatem:

Metoda 2: Użyj zdarzenia Onload Image w JavaScript z funkcją zdefiniowaną przez użytkownika

Funkcję zdefiniowaną przez użytkownika można również wykorzystać do obrazu w procesie ładowania, który jest dostępny w „Html”Plik za pośrednictwem„Onload". Ta funkcja zwróci status obrazu w polu alertu.

Sprawdź poniższy przykład, aby zrozumieć określoną koncepcję.

Przykład

Najpierw zdefiniujemy „ImageOnload ()”Funkcja i pokaż status obrazu, który ma być załadowany przez pole Alert:

funkcja imageNload ()
alert („obraz jest załadowany pomyślnie”);

Następnie dodamy ścieżkę obrazu, którą należy pobrać i wywołać zdefiniowane „ImageOnload ()”Funkcjonowanie jako„Onload" wydarzenie. Ponadto określamy również źródło pliku JavaScript w pliku HTML:

lt; img src = "e: \ artykuły techniczne \ \ obraz.Png "onload =" imageNload () ">

Wyjście

Podaliśmy różne metody użycia zdarzenia obrazu w JavaScript w JavaScript.

Wniosek

Aby użyć zdarzenia Onload w JavaScript, możesz użyć dokumentu.metoda QuerySelelect () lub funkcja zdefiniowana przez użytkownika. W pierwszym podejściu metoda addEventListener () jest wywoływana z obiektem okiennym używanym do dodania słuchacza zdarzeń do dokumentu.Metoda QuerySelector (). W drugim podejściu można utworzyć obiekt zdefiniowany przez użytkownika, który jest dostępny w pliku HTML za pośrednictwem zdarzenia Onload. W tym zapisie omówiono metodę użycia zdarzenia Onload JavaScript.