logo

JavaScript-Onload

In JavaScript kann dieses Ereignis dazu dienen, eine bestimmte Funktion zu starten, wenn die Seite vollständig angezeigt wird. Es kann auch verwendet werden, um den Typ und die Version des Browsers des Besuchers zu überprüfen. Mithilfe des können wir überprüfen, welche Cookies eine Seite verwendet laden Attribut.

In HTML wird das Onload-Attribut ausgelöst, wenn ein Objekt geladen wurde. Der Zweck dieses Attributs besteht darin, ein Skript auszuführen, wenn das zugehörige Element geladen wird.

In HTML ist das laden Das Attribut wird im Allgemeinen mit dem verwendet Element zum Ausführen eines Skripts, sobald der Inhalt (einschließlich CSS-Dateien, Bilder, Skripte usw.) der Webseite vollständig geladen ist. Es ist nicht notwendig, es nur mit tag zu verwenden, da es mit anderen HTML-Elementen verwendet werden kann.

Der Unterschied zwischen dem document.onload Und window.onload Ist: document.onload wird vor dem Laden von Bildern und anderen externen Inhalten ausgelöst. Es wird vor dem abgefeuert window.onload . Während window.onload Wird ausgelöst, wenn die gesamte Seite geladen wird, einschließlich CSS-Dateien, Skriptdateien, Bildern usw.

Machen Sie den Text im CSS fett

Syntax

 window.onload = fun() 

Lassen Sie uns dieses Ereignis anhand einiger Beispiele verstehen.

Binärbaum in Java

Beispiel 1

In diesem Beispiel gibt es ein div-Element mit einer Höhe von 200 Pixel und einer Breite von 200 Pixel. Hier verwenden wir die window.onload() um die Hintergrundfarbe, Breite und Höhe des zu ändern div Element nach dem Laden der Webseite.

Die Hintergrundfarbe ist auf eingestellt 'Rot' , und Breite und Höhe sind auf eingestellt 300px jede.

 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> 
Testen Sie es jetzt

Ausgabe

Nach der Ausführung des Codes und dem Laden der Seite lautet die Ausgabe:

JavaScript-Onload

Beispiel2

In diesem Beispiel implementieren wir eine einfache Animation, indem wir die Eigenschaften des DOM-Objekts und Funktionen von verwenden Javascript . Wir benutzen das JavaScript-Funktion getElementById() zum Abrufen des DOM-Objekts und weisen Sie dieses Objekt dann einer globalen Variablen zu.

arp einen Befehl
 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> 
Testen Sie es jetzt

Ausgabe

Nach erfolgreicher Ausführung des obigen Codes lautet die Ausgabe:

JavaScript-Onload

Nun gibt es ein Beispiel, in dem wir HTML verwenden werden laden Attribut und die JavaScript-Funktionen.

Beispiel3

Es ist ein einfaches Beispiel für die Verwendung von HTML laden Attribut mit der in JavaScript definierten Funktion. In diesem Beispiel ist die Alarm() Die Funktion wird immer dann aufgerufen, wenn das Dokument aktualisiert wird.

 function fun() { alert(&apos;Hello World!!, Welcome to the javaTpoint.com&apos;); } <p> Try to refresh the document to see the effect. </p> 
Testen Sie es jetzt

Ausgabe

Heap-Sortierung

Nach der Ausführung des obigen Codes lautet die Ausgabe:

JavaScript-Onload