Le concept HTML/JS onload peut vous aider à contrôler le comportement de la page Web une fois qu'elle a été chargée.

Le chargement d'une page Web comprend l'attente du chargement complet du contenu de la page, des images et des autres ressources.

Certaines pages Web garantissent que certaines fonctionnalités ne se produisent pas tant que tout n'est pas chargé. Un exemple inclut la récupération des données d'une base de données uniquement après le chargement de la page.

Il existe différentes façons de vérifier si une page Web est entièrement chargée. Vous pouvez écouter des événements à l'aide de gestionnaires d'événements JavaScript, utiliser le fenêtre.onload événement JavaScript, ou l'événement en charge Attribut HTML.

Comment utiliser onLoad avec l'élément HTML Body

Vous pouvez utiliser des événements JavaScript pour vérifier si le corps de la page Web a été chargé. Vous aurez besoin d'un fichier HTML avec du contenu de page et d'un fichier JavaScript pour exécuter le code.

Le code utilisé dans ce projet est disponible dans un

instagram viewer
Référentiel GitHub et est libre d'utilisation sous la licence MIT.

  1. Dans un nouveau fichier HTML appelé index.html, ajoutez le code HTML de base suivant :
    html>
    <html>
    <diriger>
    <titre>Exemple d'utilisation de onloadtitre>
    diriger>
    <corps>
    <h1>Exemple utilisant onload()h1>
    <p>Cet exemple montre comment utiliser l'événement onload() en JavaScript.p>
    corps>
    html>
  2. Créez un nouveau fichier dans le même dossier appelé script.js. Liez ce fichier à votre page HTML à l'aide de la balise script. Vous pouvez ajouter la balise script au bas de la balise body :
    <corps>
     Votre contenu 
    <scénariosrc="script.js">scénario>
    corps>
  3. Dans le contenu de votre balise de corps HTML, ajoutez une balise de paragraphe vide.
    <pidentifiant="sortir">p>
  4. Dans le fichier JavaScript, ajoutez le fenêtre.onload fonction événementielle. Cela s'exécutera lorsque la page sera chargée :
    fenêtre.onload = fonction() {
    // code à exécuter lors du chargement de la page
    };
  5. Dans la fonction, remplissez le contenu de la balise de paragraphe vide. Cela changera la balise de paragraphe pour afficher un message uniquement lorsque la page est chargée :
    document.getElementById("sortir").innerHTML = "Page chargée !";
  6. Alternativement, vous pouvez également utiliser un écouteur d'événement pour écouter le DOMContentLoaded événement. DOMContentLoaded se déclenche plus tôt que window.onload. Il se déclenche dès que le document HTML est prêt, plutôt que d'attendre que toutes les ressources externes se chargent.
    document.addEventListener('DOMContentLoaded', fonction() {
    document.getElementById("sortir").innerHTML = "Page chargée !";
    });
  7. Ouvrez le fichier index.html dans un navigateur Web pour afficher le message une fois le chargement de la page terminé :
  8. Au lieu d'utiliser des événements JavaScript pour vérifier si une page a été chargée, vous pouvez également utiliser le en charge Attribut HTML pour le même résultat. Ajoutez l'attribut onload à la balise body de votre fichier HTML :
    <corpsen charge="init()">
  9. Créer le init() fonction à l'intérieur du fichier JavaScript. Il n'est pas recommandé d'utiliser à la fois l'attribut HTML onload et l'événement JavaScript onload en même temps. Cela pourrait entraîner un comportement inattendu ou des conflits entre les deux fonctions.
    fonctioninitialiser() {
    document.getElementById("sortir").innerHTML = "Page chargée !";
    }

Nous vous recommandons d'utiliser les écouteurs d'événements JavaScript et les fenêtre.onload méthode sur le HTML en charge car il est recommandé de séparer le comportement et le contenu de la page Web. De plus, les écouteurs d'événements JavaScript offrent plus de compatibilité et de flexibilité par rapport aux deux autres méthodes.

Comment utiliser onLoad avec l'élément HTML Image

Vous pouvez également utiliser l'événement onload pour exécuter du code lorsque d'autres éléments se chargent sur la page. L'élément image en est un exemple.

  1. Dans le même dossier que votre fichier index.html, ajoutez n'importe quelle image.
  2. Dans le fichier HTML, ajoutez une balise d'image et liez l'attribut src au nom de l'image enregistrée dans le dossier.
    <imageidentifiant="mon image"src="Pidgeymon.png"largeur="300">
  3. Ajoutez une autre balise de paragraphe vide pour afficher un message lors du chargement de l'image :
    <pidentifiant="imageLoadedMessage">p>
  4. Dans le fichier JavaScript, ajoutez un événement onload sur l'image. Utiliser l'identifiant unique mon image pour déterminer à quel élément d'image ajouter l'événement onload :
    var monImage = document.getElementById("mon image");
    monImage.onload = fonction() {

    };
  5. Dans l'événement onload, modifiez le code HTML interne pour ajouter le Image chargée message:
    document.getElementById("imageLoadedMessage").innerHTML = "Image chargée !";
  6. À la place d'utiliser monImage.onload, vous pouvez également utiliser un écouteur d'événement pour écouter le charger Evénement JavaScript :
    monImage.addEventListener('charger', fonction() {
    document.getElementById("imageLoadedMessage").innerHTML = "Image chargée !";
    });
  7. Ouvrez index.html dans un navigateur Web pour afficher l'image et le message :
  8. Pour le même résultat, vous pouvez également utiliser l'attribut HTML onload. Semblable à la balise body, ajoutez un attribut onload à la balise img :
    <imageidentifiant="mon image"src="Pidgeymon.png"largeur="300"en charge="imageChargée()">
  9. Ajoutez la fonction dans le fichier JavaScript, pour exécuter le code une fois l'image chargée :
    fonctionimageLoaded() {
    document.getElementById("imageLoadedMessage").innerHTML = "Image chargée !";
    }

Comment utiliser onLoad lors du chargement du JavaScript

Vous pouvez utiliser l'attribut HTML onload pour vérifier si le navigateur a fini de charger le fichier JavaScript. Il n'existe pas d'événement JavaScript onload équivalent pour la balise de script.

  1. Ajoutez l'attribut onload à la balise de script dans votre fichier HTML.
    <scénariosrc="script.js"en charge="LoadedJs()">scénario>
  2. Ajoutez la fonction à votre fichier JavaScript. Imprimer un message en connexion à la console du navigateur:
    fonctionLoadedJs() {
    console.enregistrer("JS Chargé par le navigateur !");
    }
  3. Ouvrez le fichier index.html dans le navigateur. Tu peux utiliser Chrome DevTools pour afficher tous les messages générés dans la console.

Chargement de pages Web dans le navigateur

Vous pouvez désormais utiliser des fonctions et des événements pour exécuter certains codes lorsqu'une page Web a terminé le chargement. Le chargement des pages est un facteur important dans la création d'une expérience utilisateur fluide et transparente.

Vous pouvez en savoir plus sur la façon dont vous pouvez intégrer des conceptions de page de chargement plus intéressantes dans votre site Web.