logo

Chargement JavaScript

En JavaScript, cet événement peut s'appliquer pour lancer une fonction particulière lorsque la page est entièrement affichée. Il peut également être utilisé pour vérifier le type et la version du navigateur du visiteur. Nous pouvons vérifier quels cookies une page utilise en utilisant le en charge attribut.

En HTML, l'attribut onload se déclenche lorsqu'un objet a été chargé. Le but de cet attribut est d'exécuter un script lors du chargement de l'élément associé.

En HTML, le en charge L'attribut est généralement utilisé avec le élément pour exécuter un script une fois que le contenu (y compris les fichiers CSS, les images, les scripts, etc.) de la page Web est complètement chargé. Il n'est pas nécessaire de l'utiliser uniquement avec tag , car il peut être utilisé avec d'autres éléments HTML.

La différence entre le document.onload et fenêtre.onload est: document.onload se déclenche avant le chargement des images et autres contenus externes. Il est tiré avant le fenêtre.onload . Tandis que le fenêtre.onload se déclenche lorsque la page entière se charge, y compris les fichiers CSS, les fichiers de script, les images, etc.

questions d'entretien en langage Java

Syntaxe

 window.onload = fun() 

Comprenons cet événement à l'aide de quelques exemples.

Exemple 1

Dans cet exemple, il y a un élément div d'une hauteur de 200 px et d'une largeur de 200 px. Ici, nous utilisons le fenêtre.onload() pour modifier la couleur d'arrière-plan, la largeur et la hauteur du div élément après le chargement de la page Web.

compter SQL distinct

La couleur d'arrière-plan est définie sur 'rouge' , et la largeur et la hauteur sont définies sur 300px chaque.

 window.onload() #bg{ width: 200px; height: 200px; border: 4px solid blue; } window.onload = function(){ document.getElementById(&apos;bg&apos;).style.backgroundColor = &apos;red&apos;; document.getElementById(&apos;bg&apos;).style.width = &apos;300px&apos;; document.getElementById(&apos;bg&apos;).style.height = &apos;300px&apos;; } <h2> This is an example of window.onload() </h2> 
Testez-le maintenant

Sortir

Après l'exécution du code et le chargement de la page, le résultat sera -

Chargement JavaScript

Exemple2

Dans cet exemple, nous implémentons une animation simple en utilisant les propriétés de l'objet DOM et les fonctions de javascript . Nous utilisons le Fonction JavaScript getElementById() pour obtenir l'objet DOM, puis assigner cet objet dans une variable globale.

chaîne en caractère
 var img = null; function init(){ img = document.getElementById(&apos;myimg&apos;); img.style.position = &apos;relative&apos;; img.style.left = &apos;50px&apos;; } function moveRight(){ img.style.left = parseInt( img.style.left) + 100 + &apos;px&apos;; } window.onload = init; <p>Click the below button to move the image right</p> 
Testez-le maintenant

Sortir

Après l'exécution réussie du code ci-dessus, le résultat sera -

Chargement JavaScript

Maintenant, il y a un exemple dans lequel nous utiliserons le HTML en charge attribut et les fonctions JavaScript.

différence entre un lion et un tigre

Exemple3

C'est un exemple simple d'utilisation du HTML en charge attribut avec la fonction définie en JavaScript. Dans cet exemple, le alerte() La fonction est appelée à chaque fois que le document est actualisé.

 function fun() { alert(&apos;Hello World!!, Welcome to the javaTpoint.com&apos;); } <p> Try to refresh the document to see the effect. </p> 
Testez-le maintenant

Sortir

Après l'exécution du code ci-dessus, le résultat sera -

Chargement JavaScript