Conceptul de încărcare HTML/JS vă poate ajuta să controlați comportamentul paginii web odată ce s-a încărcat.

Încărcarea unei pagini web include așteptarea ca conținutul paginii, imaginile și alte resurse să fie complet încărcate.

Unele pagini web asigură că anumite funcționalități nu apar până când totul nu s-a terminat de încărcat. Un exemplu include preluarea datelor dintr-o bază de date numai după ce pagina s-a încărcat.

Există diferite moduri prin care puteți verifica dacă o pagină web este încărcată complet. Puteți asculta evenimente folosind handlere de evenimente JavaScript, utilizați fereastră.încărcare eveniment JavaScript sau onload atribut HTML.

Cum să utilizați onLoad cu elementul HTML Body

Puteți utiliza evenimente JavaScript pentru a verifica dacă s-a încărcat corpul paginii web. Veți avea nevoie de un fișier HTML cu un conținut de pagină și un fișier JavaScript pentru a executa codul.

Codul folosit în acest proiect este disponibil în a Depozitul GitHub și este gratuit pentru utilizare sub licența MIT.

instagram viewer
  1. Într-un fișier HTML nou numit index.html, adăugați următorul cod HTML de bază:
    html>
    <html>
    <cap>
    <titlu>Exemplu folosind onloadtitlu>
    cap>
    <corp>
    <h1>Exemplu folosind onload()h1>
    <p>Acest exemplu demonstrează cum să utilizați evenimentul onload() în JavaScript.p>
    corp>
    html>
  2. Creați un fișier nou în același folder numit script.js. Conectați acest fișier la pagina dvs. HTML utilizând eticheta de script. Puteți adăuga eticheta de script în partea de jos a etichetei body:
    <corp>
     Conținutul dvs 
    <scenariusrc=„script.js”>scenariu>
    corp>
  3. În conținutul etichetei HTML body, adăugați o etichetă de paragraf goală.
    <pid="ieșire">p>
  4. În interiorul fișierului JavaScript, adăugați fereastră.încărcare functie de eveniment. Aceasta se va executa când pagina s-a încărcat:
    fereastră.onload = funcţie() {
    // cod de rulat când pagina este încărcată
    };
  5. În interiorul funcției, completați conținutul etichetei de paragraf goale. Aceasta va schimba eticheta de paragraf pentru a afișa un mesaj numai atunci când pagina s-a încărcat:
    document.getElementById("ieșire").innerHTML = „Pagină încărcată!”;
  6. Alternativ, poți și tu utilizați un ascultător de evenimente a asculta pentru DOMCContentLoaded eveniment. DOMCContentLoaded declanșează mai devreme decât window.onload. Se declanșează imediat ce documentul HTML este gata, în loc să aștepte încărcarea tuturor resurselor externe.
    document.addEventListener(„DOMContentLoaded”, funcţie() {
    document.getElementById("ieșire").innerHTML = „Pagină încărcată!”;
    });
  7. Deschideți fișierul index.html într-un browser web, pentru a vedea mesajul când pagina se termină de încărcat:
  8. În loc să utilizați evenimente JavaScript pentru a verifica dacă o pagină s-a încărcat, puteți utiliza și onload Atribut HTML pentru același rezultat. Adăugați atributul onload la eticheta body din fișierul HTML:
    <corponload="init()">
  9. Creați init() funcția din fișierul JavaScript. Nu este recomandat să utilizați atât atributul onload HTML, cât și evenimentul onload JavaScript în același timp. Acest lucru ar putea duce la un comportament neașteptat sau la conflicte între cele două funcții.
    funcţieinit() {
    document.getElementById("ieșire").innerHTML = „Pagină încărcată!”;
    }

Vă recomandăm să utilizați ascultătorii de evenimente JavaScript și fereastră.încărcare metoda peste HTML onload atribut deoarece păstrarea separată a comportamentului și a conținutului paginii web este o practică bună. De asemenea, ascultătorii de evenimente JavaScript oferă mai multă compatibilitate și flexibilitate față de celelalte două metode.

Cum se utilizează onLoad cu elementul HTML de imagine

De asemenea, puteți utiliza evenimentul onload pentru a executa cod atunci când alte elemente se încarcă pe pagină. Un exemplu în acest sens este elementul imagine.

  1. În același dosar ca fișierul index.html, adăugați orice imagine.
  2. În interiorul fișierului HTML, adăugați o etichetă de imagine și legați atributul src la numele imaginii salvate în dosar.
    <imgid=„Imaginea mea”src=„Pidgeymon.png”lăţime="300">
  3. Adăugați o altă etichetă de paragraf goală pentru a afișa un mesaj atunci când imaginea se încarcă:
    <pid=„imageLoadedMessage”>p>
  4. În interiorul fișierului JavaScript, adăugați un eveniment de încărcare pe imagine. Utilizați id-ul unic myImage pentru a determina la ce element de imagine să adăugați evenimentul onload:
    var myImage = document.getElementById(„Imaginea mea”);
    myImage.onload = funcţie() {

    };
  5. În cadrul evenimentului onload, modificați HTML-ul interior pentru a adăuga Imaginea a fost încărcată mesaj:
    document.getElementById(„imageLoadedMessage”).innerHTML = „Imaginea încărcată!”;
  6. În loc de a folosi myImage.onload, puteți folosi și un ascultător de evenimente pentru a asculta sarcină Eveniment JavaScript:
    myImage.addEventListener('sarcină', funcţie() {
    document.getElementById(„imageLoadedMessage”).innerHTML = „Imaginea încărcată!”;
    });
  7. Deschideți index.html într-un browser web pentru a vizualiza imaginea și mesajul:
  8. Pentru același rezultat, puteți utiliza și atributul onload HTML. Similar cu eticheta body, adăugați un atribut onload la eticheta img:
    <imgid=„Imaginea mea”src=„Pidgeymon.png”lăţime="300"onload=„imagineLoaded()”>
  9. Adăugați funcția în fișierul JavaScript, pentru a executa codul când imaginea s-a încărcat:
    funcţieimagineLoaded() {
    document.getElementById(„imageLoadedMessage”).innerHTML = „Imaginea încărcată!”;
    }

Cum se folosește onLoad când se încarcă JavaScript

Puteți utiliza atributul HTML onload pentru a verifica dacă browserul a terminat de încărcat fișierul JavaScript. Nu există un eveniment de încărcare JavaScript echivalent pentru eticheta de script.

  1. Adăugați atributul onload la eticheta de script din fișierul HTML.
    <scenariusrc=„script.js”onload=„LoadedJs()”>scenariu>
  2. Adăugați funcția în fișierul JavaScript. Imprimați un mesaj până la conectarea la consola browserului:
    funcţieLoadedJs() {
    consolă.Buturuga(„JS încărcat de browser!”);
    }
  3. Deschideți fișierul index.html în browser. Puteți utilizați Chrome DevTools pentru a vizualiza orice mesaj ieșit în consolă.

Încărcarea paginilor web în browser

Acum puteți folosi funcții și evenimente pentru a executa un anumit cod atunci când o pagină web s-a terminat de încărcat. Încărcarea paginilor este un factor important în crearea unei experiențe de utilizator fluide și fără întreruperi.

Puteți afla mai multe despre cum puteți integra modele de pagini de încărcare mai interesante în site-ul dvs. web.