Le chargement d’une page web consiste à attendre que le contenu de la page, les images et les autres ressources soient complètement chargés.
Certaines pages web veillent à ce que certaines fonctionnalités ne soient pas exécutées tant que le chargement n’est pas terminé. Par exemple, la récupération des données d’une base de données n’a lieu qu’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 les événements à l’aide des gestionnaires d’événements JavaScript, utiliser la fonction window.onload JavaScript, ou l’événement onload 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 contenant le contenu de la page et d’un fichier JavaScript pour exécuter le code.
Le code utilisé dans ce projet est disponible dans un dépôt GitHub et est libre d’utilisation sous la licence MIT.
- Dans un nouveau fichier HTML appelé index.htmlajoutez le code HTML de base suivant :
<!DOCTYPE html>
<html>
<head>
<title>Example using onload</title>
</head>
<body>
<h1>Example using onload()</h1>
<p>This example demonstrates how to use the onload() event in JavaScript.</p>
</body>
</html> - 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 :
<body>
<!-- Your content -->
<script src="script.js"></script>
</body> - À l’intérieur du contenu de votre balise HTML body, ajoutez une balise paragraphe vide.
<p id="output"></p> - Dans le fichier JavaScript, ajoutez la balise window.onload fonction événementielle. Celle-ci s’exécutera lorsque la page aura été chargée :
window.onload = function() {
// code to run when page is loaded
}; - À l’intérieur de la fonction, remplissez le contenu de la balise de paragraphe vide. Cela modifiera la balise de paragraphe pour qu’elle affiche un message uniquement lorsque la page a été chargée :
document.getElementById("output").innerHTML = "Page loaded!"; - Vous pouvez également utiliser un écouteur d’événements pour écouter le message de la fonction 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 le chargement de toutes les ressources externes.
document.addEventListener('DOMContentLoaded', function() {
document.getElementById("output").innerHTML = "Page loaded!";
}); - Ouvrez le fichier index.html dans un navigateur web, pour voir le message lorsque la page a fini de se charger :
- Au lieu d’utiliser les événements JavaScript pour vérifier si une page a été chargée, vous pouvez également utiliser la fonction onload pour obtenir le même résultat. Ajoutez l’attribut onload à la balise body de votre fichier HTML :
<body onload="init()"> - Créez la balise init() dans le fichier JavaScript. Il n’est pas recommandé d’utiliser simultanément l’attribut HTML onload et l’événement JavaScript onload. Cela pourrait entraîner un comportement inattendu ou des conflits entre les deux fonctions.
function init() {
document.getElementById("output").innerHTML = "Page loaded!";
}
Nous recommandons d’utiliser les écouteurs d’événements JavaScript et la fonction window.onload sur la méthode HTML onload parce qu’il est bon de séparer le comportement et le contenu de la page web. En outre, les récepteurs d’événements JavaScript offrent davantage de compatibilité et de flexibilité que les 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.
- Dans le même dossier que votre fichier index.html, ajoutez une image.
- Dans le fichier HTML, ajoutez une balise image et liez l’attribut src au nom de l’image enregistrée dans le dossier.
<img id="myImage" src="Pidgeymon.png" width="300"> - Ajoutez une autre balise paragraphe vide pour afficher un message au chargement de l’image :
<p id="imageLoadedMessage"></p> - Dans le fichier JavaScript, ajoutez un événement onload sur l’image. Utilisez l’identifiant unique monImage pour déterminer l’élément d’image auquel ajouter l’événement onload :
var myImage = document.getElementById("myImage");
myImage.onload = function() {
}; - À l’intérieur de l’événement onload, modifiez le code HTML interne pour ajouter l’élément Image chargée message :
document.getElementById("imageLoadedMessage").innerHTML = "Image loaded!"; - Au lieu d’utiliser myImage.onloadVous pouvez également utiliser un écouteur d’événements pour écouter l’événement chargement Événement JavaScript :
myImage.addEventListener('load', function() {
document.getElementById("imageLoadedMessage").innerHTML = "Image loaded!";
}); - Ouvrez index.html dans un navigateur web pour voir l’image et le message :
- Pour obtenir le même résultat, vous pouvez également utiliser l’attribut HTML onload. Comme pour la balise body, ajoutez un attribut onload à la balise img :
<img id="myImage" src="Pidgeymon.png" width="300" onload="imageLoaded()"> - Ajoutez la fonction dans le fichier JavaScript, pour exécuter le code lorsque l’image a été chargée :
function imageLoaded() {
document.getElementById("imageLoadedMessage").innerHTML = "Image loaded!";
}
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 onload équivalent en JavaScript pour la balise script.
- Ajoutez l’attribut onload à la balise script dans votre fichier HTML.
<script src="script.js" onload="LoadedJs()"></script> - Ajoutez la fonction à votre fichier JavaScript. Imprimez un message en vous connectant à la console du navigateur :
function LoadedJs() {
console.log("JS Loaded by the browser!");
} - Ouvrez le fichier index.html dans le navigateur. Vous pouvez utiliser Chrome DevTools pour afficher tous les messages affichés dans la console.
Vous pouvez désormais utiliser des fonctions et des événements pour exécuter un certain code lorsque le chargement d’une page web est terminé. Le chargement des pages est un facteur important dans la création d’une expérience utilisateur fluide et homogène.
Vous pouvez en savoir plus sur la manière d’intégrer des pages de chargement plus intéressantes dans votre site web.
