Erste benachrichtigt, wenn die Seite DOM geladen wird (aber vor window.onload)

StackOverflow https://stackoverflow.com/questions/65434

  •  09-06-2019
  •  | 
  •  

Frage

Ich weiß, es gibt einige Möglichkeiten informiert werden, wenn die Seite Körper (vor allem der Bilder und 3rd-Party-Ressourcen Lesen, die das feuern window.onload Ereignis) geladen ist, aber es ist anders für jeden Browser .

Gibt es eine endgültige Art und Weise den Browser diese auf, alles zu tun?

Bisher kenne ich:

  • DOMContentLoaded : Auf Mozilla, Opera 9 und neuesten WebKits. Dies beinhaltet einen Zuhörer auf das Ereignis hinzufügen:

    document.addEventListener ( "DOMContentLoaded", [init-Funktion], false);

  • Latente Skript . Auf IE, einen Skript-Tag mit einem @defer Attribute emittieren kann, das wird sicher nur Last nach dem Schließen des BODY-Tages

  • Polling :? Auf anderen Browsern können Sie Polling halten, aber gibt es auch eine Standard-Sache für abzufragen, oder haben Sie verschiedene Dinge auf jedem Browser tun müssen,

Ich möchte in der Lage sein zu gehen, ohne Dateien document.write oder extern verwendet wird.

Dies kann einfach über jQuery getan werden: 

$(document).ready(function() { ... })

, aber ich habe eine JS-Bibliothek zu schreiben und rechnen kann nicht auf jQuery immer dort zu sein.

War es hilfreich?

Lösung

Es gibt kein Cross-Browser-Verfahren zur Überprüfung, wenn das DOM bereit ist, -. Deshalb Bibliotheken wie jQuery existieren, zu abstrahieren fiesem kleinen Stückchen Inkompatibilität

Mozilla, Opera und moderne WebKit Unterstützung der DOMContentLoaded Veranstaltung. IE und Safari müssen seltsame Hacks wie das Fenster scrollen oder Überprüfung Sheets. Die blutigen Details werden in jQuery bindReady() Funktion enthalten ist.

Andere Tipps

Ich fand diese Seite, die eine kompakte eigenständige Lösung zeigt. Es scheint auf jedem Browser zu arbeiten und hat eine Erklärung wie:

http://www.kryogenix.org/days/2007/09 / 26 / shortloaded

YUI verwendet drei Tests, dies zu tun: für Firefox und die letzten WebKit gibt es ein DOMContentLoaded Ereignis, das ausgelöst wird. Für ältere Safari beobachtete, wie der document.readyState, bis es „geladen“ oder „vollständig“. Für IE eine HTML-Tag

wird erstellt und die „doScroll ()“ Methode genannt, die aus Fehlern sollten, wenn das DOM nicht bereit ist. Die Quelle für YAHOO.util.Event zeigt YUI-spezifischen Code. Suche nach "doScroll" im Event.js.

eine Bibliothek wie jQuery verwenden werden Ihnen unzählige Stunden Browser Inkonsistenzen speichern.

In diesem Fall mit jQuery können Sie einfach 

$(document).ready ( function () {
    //your code here
});

Wenn Sie neugierig Sie einen Blick auf die Quelle nehmen, um zu sehen, wie es gemacht wird, ist aber an diesem Tag und Alter Ich glaube nicht, dass jemand sein sollte, dieses Rad neu zu erfinden, wenn die Bibliothek Schriftsteller all die schmerzhafte Arbeit für getan haben Sie.

Nehmen Sie einfach das entsprechende Stück Code von jQuery, John Resig meisten Basen zu diesem Thema bereits in jQuery gelegt hat.

Warum nicht diese: 

<body>  
  <!-- various content -->  
  <script type="text/javascript">  
  <!--  
    myInit();  
  -->
  </script>  
</body>

Wenn ich verstehe, was richtig ist myInit würde so schnell ausgeführt werden soll, wie Browser es in der Seite getroffen, die in einem Körper letzte Sache ist.

Die Phantasie cross Lösung, die Sie suchen .... nicht existiert ... (man stelle sich den Klang einer großen Menschenmenge zu sagen ‚aahhhh ....‘).

DOMContentLoaded ist einfach dein Bestes. Sie müssen noch die polling Technik für IE-Oldies.

  1. Versuchen Sie addEventListener zu verwenden;
  2. Falls nicht verfügbar (IE offensichtlich), überprüfen Sie für Rahmen;
  3. Wenn kein Rahmen, blättern, bis kein geworfen den Fehler get (Polling);
  4. Wenn ein Rahmen, verwendet IE Ereignis document.onreadystatechange;
  5. Für andere nicht-unterstützende Browser verwendet altes document.onload Ereignis.

Ich habe das folgende Codebeispiel auf javascript.info gefunden mit dem Sie alle Browser decken: 

function bindReady(handler){

    var called = false

    function ready() { 
        if (called) return
        called = true
        handler()
    }

    if ( document.addEventListener ) { // native event
        document.addEventListener( "DOMContentLoaded", ready, false )
    } else if ( document.attachEvent ) {  // IE

        try {
            var isFrame = window.frameElement != null
        } catch(e) {}

        // IE, the document is not inside a frame
        if ( document.documentElement.doScroll && !isFrame ) {
            function tryScroll(){
                if (called) return
                try {
                    document.documentElement.doScroll("left")
                    ready()
                } catch(e) {
                    setTimeout(tryScroll, 10)
                }
            }
            tryScroll()
        }

        // IE, the document is inside a frame
        document.attachEvent("onreadystatechange", function(){
            if ( document.readyState === "complete" ) {
                ready()
            }
        })
    }

    // Old browsers
    if (window.addEventListener)
        window.addEventListener('load', ready, false)
    else if (window.attachEvent)
        window.attachEvent('onload', ready)
    else {
        var fn = window.onload // very old browser, copy old onload
        window.onload = function() { // replace by new onload and call the old one
            fn && fn()
            ready()
        }
    }
}

Das funktioniert ziemlich gut: 

setTimeout(MyInitFunction, 0);

Mit SetTimeout kann sehr gut funktionieren, obwohl, wenn es ausgeführt ist bis zum Browser ist. Wenn Sie Null als Timeout-Zeit übergeben, wird der Browser ausgeführt wird, wenn die Dinge „erledigt“.

Das gute daran ist, dass Sie viele von ihnen haben kann, und müssen über Verkettungs Beiladen Ereignisse keine Sorge. 

setTimeout(myFunction, 0);
setTimeout(anotherFunction, 0);
setTimeout(function(){ doSomething ...}, 0);

etc.

Sie werden alle laufen, wenn das Dokument vollständig geladen wurde, oder wenn Sie ein, nachdem das Dokument gesetzt wird geladen, werden sie ausgeführt, nachdem das Skript ausgeführt beendet ist.

Die Reihenfolge, in sie laufen nicht bestimmt wird, und kann zwischen den Browsern ändern. So können Sie nicht auf myFunction zählen, bevor anotherFunction zum Beispiel ausgeführt werden.

Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
scroll top