Zdarzenia ładowania i zamykania strony w DOM w JavaScript

By /

JavaScript

W świecie web developmentu, zrozumienie zdarzeń związanych z ładowaniem i zamykaniem strony jest kluczowe dla tworzenia interaktywnych i responsywnych aplikacji internetowych. JavaScript oferuje różne zdarzenia, które pozwalają reagować na etapy ładowania strony oraz jej zamykanie. Te zdarzenia mogą być wykorzystane do inicjalizacji skryptów, prezentacji animacji ładowania, zapisywania danych przed zamknięciem strony i wielu innych zadań.

Zdarzenia ładowania strony

Podczas ładowania strony w przeglądarce, możemy wyróżnić kilka kluczowych zdarzeń:

  • DOMContentLoaded – wyzwalane, gdy cały HTML zostanie załadowany i zanalizowany, bez oczekiwania na arkusze stylów, obrazy i ramki.
  • load – wyzwalane, gdy cała strona wraz z wszystkimi zasobami zależnymi (takimi jak arkusze stylów i obrazy) została załadowana.
  • beforeunload – wyzwalane, gdy użytkownik opuszcza stronę, dając możliwość zapytania, czy na pewno chce opuścić stronę.
  • unload – wyzwalane po opuszczeniu strony, służy do czyszczenia zasobów.

Zdarzenia zamykania strony

Zdarzenie beforeunload jest szczególnie użyteczne, gdy chcemy zapytać użytkownika, czy na pewno chce opuścić stronę, co może być przydatne przy formularzach lub gdy użytkownik mógłby stracić niezapisane dane.

Przykład kodu

Poniższy przykład demonstruje, jak wykorzystać zdarzenia ładowania i zamykania strony w praktyce. Skrypt jest umieszczony wraz z prostym kodem HTML w jednym pliku.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Zdarzenia ładowania i zamykania strony</title>
</head>
<body>
    <h1>Witaj na stronie!</h1>
    <script>
        // Zdarzenie DOMContentLoaded
        document.addEventListener('DOMContentLoaded', function() {
            console.log('Dokument został załadowany');
        });

        // Zdarzenie load
        window.addEventListener('load', function() {
            console.log('Strona wraz z zasobami została załadowana');
        });

        // Zdarzenie beforeunload
        window.addEventListener('beforeunload', function(event) {
            // Wyświetlenie komunikatu do użytkownika
            const message = 'Czy na pewno chcesz opuścić stronę?';
            event.returnValue = message;
            return message;
        });

        // Zdarzenie unload
        window.addEventListener('unload', function() {
            console.log('Użytkownik opuścił stronę');
        });
    </script>
</body>
</html>

Podsumowanie

Zrozumienie i wykorzystanie zdarzeń związanych z ładowaniem i zamykaniem strony pozwala na stworzenie bardziej interaktywnych i bezpiecznych aplikacji internetowych. Dzięki reagowaniu na te zdarzenia, programiści mogą kontrolować proces inicjalizacji aplikacji, zarządzać zasobami oraz interweniować, kiedy użytkownik próbuje opuścić stronę z niezapisanymi zmianami. Wykorzystanie zdarzeń DOMContentLoaded, load, beforeunload i unload w praktyce pozwala na tworzenie bardziej responsywnych i przyjaznych dla użytkownika aplikacji webowych.

Jeżeli chcesz przyśpieszyć swoją naukę tworzenia stron chciałbym polecić mój kurs video JavaScript w którym nauczysz się tego języka od podstaw do zaawansowanych jego aspektów.

Powiązane artykuły

Scroll to Top