Ereignis zum Laden der Seite des JavaScript-Instanzanalysefensters

Dieser Artikel vermittelt Ihnen relevantes Wissen über Javascript, das hauptsächlich Fensterfensterereignisse einführt. Dieses Ereignis wird ausgelöst, wenn der Dokumentinhalt vollständig geladen ist. Ich hoffe, es wird für alle hilfreich sein.

[Verwandte Empfehlungen: Javascript-Video-Tutorial, Web-Frontend]

Fenster-Seitenladeereignis

window.
onload
 = function() {}或者 window.addEventListener('
load
', function() {});

window.onload ist ein Fenster-(Seiten-)Ladeereignis, wenn das Dokument Der Inhalt ist vollständig geladen. Das Ereignis (einschließlich Bilder, Skriptdateien, CSS-Dateien usw.) wird später ausgelöst.

Hinweis:

• Mit window.onload können Sie den js-Code über das Seitenelement schreiben, da onload darauf wartet, dass der gesamte Seiteninhalt geladen wird, bevor die Verarbeitungsfunktion ausgeführt wird Window.onload kann bei der herkömmlichen Registrierungsmethode nur einmal geschrieben werden. Wenn es mehrere gibt, hat das letzte window.onload Vorrang.

• Bei der Verwendung von window.addEventListener('load', function() { }) gibt es keine Begrenzung.

• document.addEventListener(
  'DOMContentLoaded'
  , function() { })

  Wenn das DOMContentLoaded-Ereignis ausgelöst wird, nur

wenn das DOM geladen ist, ausgenommen Stylesheets, Bilder, Flash

usw. Wenn sich viele Bilder auf der Seite befinden, kann es vom Benutzerzugriff bis zum Auslösen des Ladens lange dauern, und der interaktive Effekt kann nicht erzielt werden, was sich zwangsläufig auf die Benutzererfahrung auswirkt. In diesem Fall ist die Verwendung angemessener DOMContentLoaded.

Das Ereignis zur Größenänderung des Fensters

window.onresize = funtion(){}
window.addEventListener("resize",funtion(){});

window.onresize ist das Ladeereignis zur Größenänderung des Fensters. Es handelt sich um eine Verarbeitungsfunktion, die immer dann ausgelöst und aufgerufen wird, wenn sich die Fenstergröße in Pixel ändert. Dieses Ereignis wird häufig zur Vervollständigung des responsiven Layouts verwendet.

window.innerWidth Die Breite des aktuellen Bildschirms.

3f1c4e4b6b16bbbd69b2ee476dc4f83a
      window,addEventListener('resize',function(){
          console.log(window.innerWidth);
      })
     2cacc6d41bbb37262a98f745aa00fbf0

hinzugefügt: pageshow-Ereignis, dieses Ereignis wird ausgelöst

, wenn die Seite angezeigt wird, unabhängig davon, ob die Seite aus dem Cache kommt. Auf der neu geladenen Seite wird die Pageshow ausgelöst, nachdem das Ladeereignis ausgelöst wurde.

Bestimmen Sie, ob das Pageshow-Ereignis durch die Seite im Cache ausgelöst wird, basierend auf der Persistenz im Ereignisobjekt. Beispiele sind wie folgt:

window.onload ist ein Fenster-(Seiten-)Ladeereignis. Wenn der Dokumentinhalt vollständig geladen ist, wird dieses Ereignis ausgelöst (einschließlich Bildern, Skriptdateien, CSS-Dateien usw.). ) und die Verarbeitungsfunktion wird aufgerufen;

Mit window.onload können Sie JS-Code über die Seitenelemente schreiben, da onload darauf wartet, dass der gesamte Seiteninhalt geladen wird, bevor die Verarbeitungsfunktion ausgeführt wird; Wenn es mehrere gibt, hat die traditionelle Registrierungsereignismethode Vorrang. Wenn Sie addEventListener verwenden, gibt es keine Begrenzung, wenn das DOMContentLoaded-Ereignis ausgelöst wird geladen, ausgenommen Stylesheets, Bilder, Flash usw.; le9 Es werden nur die oben genannten unterstützt.

Wenn sich viele Bilder auf der Seite befinden, kann es lange dauern, bis der DOMContentl geladen wird

rrree

Dies wird zuerst angezeigt, nachdem das Laden des DOM abgeschlossen ist;

Klicken Sie auf die Schaltfläche, um dies abzuspielen ein mit addEventListener registriertes Ladeereignis;

Die DOM-Methode querySelector() erfordert keine zusätzliche Unterstützung wie jQuery. Die Syntax ähnelt der von jQuery erstes Element, das mit dem angegebenen Selektor übereinstimmt;

Das ist das erste Mal, dass ich das sehe;

Das obige ist der detaillierte Inhalt vonEreignis zum Laden der Seite des JavaScript-Instanzanalysefensters. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!