Koncepcja onload HTML/JS może pomóc w kontrolowaniu zachowania strony internetowej po jej załadowaniu.

Ładowanie strony internetowej obejmuje oczekiwanie na całkowite załadowanie zawartości strony, obrazów i innych zasobów.

Niektóre strony internetowe zapewniają, że niektóre funkcje nie działają, dopóki wszystko się nie załaduje. Przykład obejmuje pobieranie danych z bazy danych dopiero po załadowaniu strony.

Istnieją różne sposoby sprawdzenia, czy strona internetowa jest w pełni załadowana. Możesz nasłuchiwać zdarzeń za pomocą programów obsługi zdarzeń JavaScript, użyj okno.wczytaj Zdarzenie JavaScript lub załaduj atrybut HTML.

Jak używać onLoad z elementem HTML treści

Możesz użyć zdarzeń JavaScript, aby sprawdzić, czy treść strony została załadowana. Do wykonania kodu potrzebny będzie plik HTML z zawartością strony oraz plik JavaScript.

Kod użyty w tym projekcie jest dostępny w formacie Repozytorium GitHub i jest darmowy do użytku na licencji MIT.

  1. W nowym pliku HTML o nazwie indeks.html, dodaj następujący podstawowy kod HTML:
    instagram viewer 
    HTML>
    <HTML>
    <głowa>
    <tytuł>Przykład użycia onloadtytuł>
    głowa>
    <ciało>
    <h1>Przykład użycia onload()h1>
    <P>Ten przykład pokazuje, jak używać zdarzenia onload() w JavaScript.P>
    ciało>
    HTML>
  2. Utwórz nowy plik w tym samym folderze o nazwie skrypt.js. Połącz ten plik ze swoją stroną HTML za pomocą tagu script. Możesz dodać tag script na dole tagu body:
    <ciało>
     Twoja zawartość 
    <scenariuszźródło=„skrypt.js”>scenariusz>
    ciało>
  3. Wewnątrz treści tagu HTML body dodaj pusty tag akapitu.
    <PID="wyjście">P>
  4. Wewnątrz pliku JavaScript dodaj okno.wczytaj funkcja zdarzenia. Zostanie to wykonane po załadowaniu strony:
    okno.pobierz = funkcjonować() {
    // kod do uruchomienia po załadowaniu strony
    };
  5. Wewnątrz funkcji wypełnij zawartość pustego znacznika akapitu. Spowoduje to zmianę znacznika akapitu, aby wyświetlał komunikat tylko po załadowaniu strony:
    dokument.getElementById("wyjście").innerHTML = "Strona załadowana!";
  6. Alternatywnie możesz też użyj detektora zdarzeń słuchać za Załadowano zawartość DOMC wydarzenie. Załadowano zawartość DOMC wyzwalacze wcześniejsze niż window.onload. Uruchamia się, gdy tylko dokument HTML jest gotowy, zamiast czekać na załadowanie wszystkich zasobów zewnętrznych.
    dokument.addEventListener(„Załadowano zawartość DOMC”, funkcjonować() {
    dokument.getElementById("wyjście").innerHTML = "Strona załadowana!";
    });
  7. Otwórz plik index.html w przeglądarce internetowej, aby wyświetlić komunikat po zakończeniu ładowania strony:
  8. Zamiast używać zdarzeń JavaScript do sprawdzania, czy strona została załadowana, możesz również użyć załaduj Atrybut HTML dla tego samego wyniku. Dodaj atrybut onload do tagu body w pliku HTML:
    <ciałozaładuj="w tym()">
  9. Utwórz w tym() funkcja wewnątrz pliku JavaScript. Nie zaleca się jednoczesnego używania atrybutu HTML onload i zdarzenia JavaScript onload. Może to prowadzić do nieoczekiwanego zachowania lub konfliktów między tymi dwiema funkcjami.
    funkcjonowaćw tym() {
    dokument.getElementById("wyjście").innerHTML = "Strona załadowana!";
    }

Zalecamy korzystanie z detektorów zdarzeń JavaScript i okno.wczytaj metoda nad HTML załaduj atrybut, ponieważ oddzielenie zachowania i zawartości strony internetowej jest dobrą praktyką. Ponadto detektory zdarzeń JavaScript zapewniają większą kompatybilność i elastyczność w porównaniu z pozostałymi dwiema metodami.

Jak używać onLoad z elementem HTML obrazu

Możesz także użyć zdarzenia onload do wykonania kodu, gdy inne elementy ładują się na stronie. Przykładem tego jest element obrazu.

  1. W tym samym folderze co plik index.html dodaj dowolny obraz.
  2. Wewnątrz pliku HTML dodaj znacznik obrazu i połącz atrybut src z nazwą obrazu zapisanego w folderze.
    <imgID="mój obraz"źródło="Pidgeymon.png"szerokość="300">
  3. Dodaj kolejny pusty znacznik akapitu, aby wyświetlić komunikat podczas ładowania obrazu:
    <PID=„Wiadomość załadowana obrazem”>P>
  4. Wewnątrz pliku JavaScript dodaj zdarzenie onload do obrazu. Użyj unikalnego identyfikatora mój obraz aby określić, do którego elementu obrazu dodać zdarzenie onload:
    rozm mój obraz = dokument.getElementById("mój obraz");
    myImage.onload = funkcjonować() {

    };
  5. Wewnątrz zdarzenia onload zmień wewnętrzny kod HTML, aby dodać plik Załadowano obraz wiadomość:
    dokument.getElementById(„Wiadomość załadowana obrazem”).innerHTML = "Obraz załadowany!";
  6. Zamiast używać myImage.onload, możesz również użyć detektora zdarzeń do nasłuchiwania obciążenie Zdarzenie JavaScript:
    myImage.addEventListener('obciążenie', funkcjonować() {
    dokument.getElementById(„Wiadomość załadowana obrazem”).innerHTML = "Obraz załadowany!";
    });
  7. Otwórz plik index.html w przeglądarce internetowej, aby wyświetlić obraz i wiadomość:
  8. Aby uzyskać ten sam wynik, możesz również użyć atrybutu onload HTML. Podobnie jak w przypadku tagu body, dodaj atrybut onload do tagu img:
    <imgID="mój obraz"źródło="Pidgeymon.png"szerokość="300"załaduj=„Obraz załadowany()”>
  9. Dodaj funkcję w pliku JavaScript, aby wykonać kod po załadowaniu obrazu:
    funkcjonowaćobraz załadowany() {
    dokument.getElementById(„Wiadomość załadowana obrazem”).innerHTML = "Obraz załadowany!";
    }

Jak używać onLoad podczas ładowania JavaScript

Możesz użyć atrybutu HTML onload, aby sprawdzić, czy przeglądarka zakończyła ładowanie pliku JavaScript. Nie ma odpowiednika JavaScript onload zdarzenia dla tagu script.

  1. Dodaj atrybut onload do znacznika skryptu w pliku HTML.
    <scenariuszźródło=„skrypt.js”załaduj=„Załadowano Js()”>scenariusz>
  2. Dodaj funkcję do pliku JavaScript. Wydrukuj wiadomość wg logowanie do konsoli przeglądarki:
    funkcjonowaćZaładowaneJs() {
    konsola.dziennik(„JS ładowany przez przeglądarkę!”);
    }
  3. Otwórz plik index.html w przeglądarce. Możesz użyj Chrome DevTools aby wyświetlić wszystkie komunikaty wysyłane do konsoli.

Ładowanie stron internetowych w przeglądarce

Teraz możesz używać funkcji i zdarzeń do wykonywania określonego kodu po zakończeniu ładowania strony internetowej. Ładowanie stron jest ważnym czynnikiem wpływającym na płynne i bezproblemowe korzystanie z witryny.

Możesz dowiedzieć się więcej o tym, jak zintegrować ciekawsze projekty stron ładujących ze swoją witryną.