JavaScript onload (Polski)

Podsumowanie: w tym samouczku dowiesz się, jak obsługiwać zdarzenie ładowania, które jest wywoływane w dokumencie, obrazie i elementach skryptu w JavaScript.

Zdarzenie ładowania okna

W przypadku obiektu window zdarzenie load jest uruchamiane, gdy cała strona internetowa (HTML) została w pełni załadowana, w tym wszystkie zależne zasoby, takie jak pliki JavaScript, pliki CSS i obrazy.

Aby obsłużyć zdarzenie load, zarejestruj się detektor zdarzeń korzystający z metody addEventListener():

Code language: JavaScript (javascript)

Lub używając onload obiekt window:

Code language: JavaScript (javascript)

Jeśli utrzymujesz starszy system, może się okazać, że moduł obsługi zdarzeń load jest zarejestrowany w elemencie body dokumentu HTML, na przykład:

Dobrą praktyką jest użycie elementu addEventListener(), aby przypisać moduł obsługi zdarzenia onload, gdy tylko jest to możliwe.

Zdarzenie ładowania obrazu

load występuje również na obrazach. Aby obsłużyć zdarzenie load na obrazach, możesz użyć metody addEventListener() elementów obrazu.

W poniższym przykładzie zastosowano procedurę obsługi zdarzenia load, aby określić, czy obraz, który istnieje w drzewie DOM, został całkowicie załadowany:

Możesz przypisać onload moduł obsługi zdarzeń bezpośrednio za pomocą atrybutu onload elementu <img>, na przykład:

Code language: HTML, XML (xml)

Jeśli tworzysz element obrazu dynamicznie, możesz przypisać moduł obsługi zdarzenia onload przed ustawieniem src w następujący sposób:

Jak to działa:

  • Najpierw utwórz element obrazu po całkowitym załadowaniu dokumentu poprzez umieszczenie kodu w moduł obsługi zdarzenia ładowania okna.
  • Po drugie, przypisz moduł obsługi zdarzenia onload do obrazu.
  • Po trzecie, dodaj obraz do dokumentu.
  • Na koniec przypisz adres URL obrazu do atrybutu src. Obraz zostanie pobrany do elementu zaraz po ustawieniu właściwości src.

Zdarzenie ładowania skryptu

<script> obsługuje również zdarzenie load nieco różniące się od standardowych sposobów.

Zdarzenie load w skrypcie umożliwia aby sprawdzić, czy plik JavaScript został całkowicie załadowany.

W przeciwieństwie do obrazów przeglądarka internetowa rozpoczyna pobieranie plików JavaScript dopiero po przypisaniu właściwości src i Element <script> został dodany do dokumentu.

Poniższy kod ładuje plik app.js po tym, jak strona została całkowicie załadowany. Przypisuje moduł obsługi zdarzeń onload, który sprawdza, czy app.js został w pełni załadowany.

Podsumowanie

Dodaj komentarz

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *