Welche externen Ressourcen werden geladen, wenn das window.onload-Ereignis ausgelöst wird und wie lautet die Ladereihenfolge der Ressourcen?

Da eine einzelne Webseite viele externe Ressourcen enthalten kann: externe Javascript, externe CSS, Bilder, Applets, Flash, etc., sagt meine konventionelle Weisheit, dass das window.onload-Ereignis ausgelöst wird, wenn alle verknüpften Ressourcen beendet sind Herunterladen (obwohl die externen Ressourcen normalerweise in mehreren Threads oder Prozessen durch die Implementierung des Browsers heruntergeladen werden). Der übliche Fall funktioniert in den meisten Fällen. Aber ... was ist, wenn die Ladesequenz nicht das ist, was ich für selbstverständlich halte, könnte irgendwo und irgendwann ein Javascript-Bug einschleichen.Welche externen Ressourcen werden geladen, wenn das window.onload-Ereignis ausgelöst wird und wie lautet die Ladereihenfolge der Ressourcen?

Nach einigen Suchen fand ich, dass es nicht der Fall ist, was ich normalerweise denke. Von dieser Seite: https://web.archive.org/web/1/http://articles.techrepublic%2ecom%2ecom/5100-10878_11-5214317.html scheint es, dass Bilder nicht geladen werden, wenn das Onload-Ereignis ausgelöst wird. Aber von hier window.onload vs <body onload=""/>, es scheint mir, die Bilder werden geladen, wenn onload ausgelöst wird. Es gibt mehr Verwirrung für mich von diesem Link http://forums.mozillazine.org/viewtopic.php?f=25&t=413504&start=0&st=0&sk=t&sd=a.

Also mein erster Teil der Frage ist: Sind alle Ressourcen wirklich geladen, wenn window.onload ausgelöst wird?

Ein weiterer naher verwandter Teil der Frage ist: Was ist die Reihenfolge, in der die Ressourcen geladen werden, bevor window.onload ausgelöst wird? Ich weiß für interne Ressourcen wie interne Javascript oder CSS, ist die Reihenfolge der Bestellung von der Spitze der Seite nach unten (es sei denn, in IE, verwenden Sie das verzögerte Skript wie hier sagt Getting notified when the page DOM has loaded (but before window.onload)). Aber was ist mit externen Javascript und CSS-Ressourcen? Zum Beispiel, wenn ich meine Seite wie folgt schreiben:

<external stylesheet...> 
<external javascript #1...> 
<external javascript #2...> 
<script> 
    ..... 
    window.onload=.... 
    </script>

dann eine Funktion in „externen JavaScript-# 2“ ruft eine Funktion in „externen Javascript-# 1“ vorausgesetzt, kann ich sicher sein, es funktioniert immer? Auch wenn window.onload eine Funktion in "external javascript # 1" aufruft funktioniert auch wie erwartet?

Sie können sagen, die Ressourcen-Lade-Sequenz und wann fire.onload Ereignis ausgelöst wird abhängig von der Browser-Implementierung, wie hier What is the event precedence in JavaScript?. Aber ich frage mich immer noch, ob es eine Spezifikation oder eine Konvention in der Öffentlichkeit gibt. Würden Sie mich bitte auf eine Ressource verweisen oder mir die Fakten mitteilen, um meine Verwirrung zu klären?

Quelle

2009-01-23 jscoot

Skriptressourcen werden geladen, bevor Onload ausgelöst wird. Imgs laden jedoch auf faule asynchrone Weise nicht unbedingt in der Reihenfolge, in der sie im Dokument aufgelistet sind.

Ich habe auch mindestens auf IE gefunden, dass nicht alle DOM-Elementeigenschaften beim Laden korrekt berechnet werden (z. B. Client-und Offset-Größen können immer noch 0 sein, wenn sie einen Wert haben sollten).

Quelle

2009-01-23 17:06:35 AnthonyWJones

Die SO-Verbindung, die Sie zur Verfügung gestellt haben, ist ein bisschen irreführend; body onload und window onload rufen beide die gleichen EVENTS auf, aber die Ereignisse werden nicht gleichzeitig ausgelöst. Window.onload wird vor dem Laden des Körpers in der Weise ausgelöst, wie es Ihre erste Ressource erklärt.

Aus Gründen der Interpretation, Browser fordern Javascript-Ressourcen in der seriellen, wo sie alles andere parallel anfordern können. Dies ist der Grund, warum Sie manchmal eine Seite laden, und Bilder werden nicht in der richtigen Reihenfolge geladen, während Javascript, abgesehen von den Umständen, die Sie erwähnt haben, in der richtigen Reihenfolge geladen wird. Also ja, die Ressourcen werden geladen.

Außerdem werten Browser zuerst js-Funktionen aus, so dass Sie keine Probleme haben sollten, eine Funktion aufzurufen, bevor sie explizit definiert wird. Dies funktioniert jedoch nicht mit Variablen.

Eine letzte Sache, CSS wird von oben nach unten interpretiert; egal, wie sie geladen sind, der Browser interpretiert Regeln, die ganz oben beginnen und sich nach unten bewegen.

Quelle

2009-01-23 17:20:31 jacobangel

Auschecken Cuzillion. Es wurde von Steve Souders vom Yahoo Performance Team geschrieben, um genau diese Dinge zu bewerten.

Worauf es ankommt: Browser laden Skripts in der Reihenfolge, in der sie im Dokument vorkommen, und alle anderen Ladevorgänge werden angehalten, während jedes Skript heruntergeladen wird. Andere Ressourcen (css/images) werden asynchron geladen und Sie können nicht sicher sein, wann sie abgeschlossen werden.

Das Onload-Ereignis wird ausgelöst, wenn das Dokument und seine Skript-/Stil-/Bildressourcen geladen werden, aber Sie möchten wahrscheinlich nicht auf Bilder warten, wenn Sie beim Laden der Seite JavaScript ausführen. Verwenden Sie stattdessen etwas wie das "ready" -Ereignis von jQuery oder feuern Sie Ihr eigenes "DOMReady" -Ereignis, indem Sie ein Skript-Tag am Ende des Körpers platzieren:

<body> 
    <!-- your page contents here --> 
    <script type="text/javascript"> 
     // DOM is ready, do scripty stuff now 
     DOMReady(); 
    </script> 
</body>

Quelle

2009-01-23 19:17:59 Prestaul

Welche externen Ressourcen werden geladen, wenn das window.onload-Ereignis ausgelöst wird und wie lautet die Ladereihenfolge der Ressourcen?

Antwort

Verwandte Themen