Pytanie jest taka jak zilion inni tutaj i w Internecie - jak sprawdzić, czy Dom został załadowany w JavaScript? Ale oto połów:

  • Bez użycia ramy jak jQuery itp;
  • Bez wiedzy, czy skrypt został załadowany przez statycznie umieszczony <script> znacznik lub za pomocą innego jak innego JavaScript, później po załadowaniu Dom.

Czy można to zrobić bardziej lub mniej niezawodnie i dzięki kompatybilności z przeglądarką?

Dodano: Pozwól mi wyjaśnić: Piszę samodzielny plik .js, który może być uwzględniony w dowolnych stronach internetowych. Chcę wykonać kod po , został załadowany przez dom. Ale nie znam , jak mój skrypt zostanie uwzględniony. Może być, umieszczając znacznik <script> (w takim przypadku będą działać tradycyjne rozwiązania onload lub DOM); Lub można go załadować za pomocą AJAX lub innych środków, znacznie później po załadowaniu DOM (tak wspomniane wcześniej rozwiązania nigdy nie wystrzeli).

73
Vilx- 12 listopad 2011, 02:10

6 odpowiedzi

Najlepsza odpowiedź

document.readyState Właściwość może być użyta do sprawdzenia, czy dokument jest gotowy. Od MDN:

Wartości

ReadyState dokumentu może być jednym z następujących:

  • ładowanie - Dokument nadal ładuje.
  • Interactive - Dokument zakończył ładowanie, a dokument został przeniesiony, ale podtynkowe, takie jak obrazy, arkusze stylów i ramki wciąż ładują.
  • kompletny - Dokument i wszystkie podtynki zakończyły ładowanie. Stan wskazuje, że Załaduj wydarzenie jest ogień.

Przykład kodu:

if(document.readyState === "complete") {
    // Fully loaded!
}
else if(document.readyState === "interactive") {
    // DOM ready! Images, frames, and other subresources are still downloading.
}
else {
    // Loading still in progress.
    // To wait for it to complete, add "DOMContentLoaded" or "load" listeners.

    window.addEventListener("DOMContentLoaded", () => {
        // DOM ready! Images, frames, and other subresources are still downloading.
    });

    window.addEventListener("load", () => {
        // Fully loaded!
    });
}
85
MultiplyByZer0 18 sierpień 2019, 18:53

Przeglądarki Firefox, Opery i Webkit mają zdarzenie na poziomie dokumentu DOMContentLoaded, które możesz słuchać z document.addEventListener("DOMContentLoaded", fn, false).

Jest bardziej skomplikowany IE. Co robi jQuery, IE jest oglądać onreadystatechange na obiekcie dokumentu dla konkretnego Readego z kopią zapasową zdarzenia Document.onload. Document.onloade Fires Później niż dom jest gotowy (tylko wtedy, gdy wszystkie obrazy zostały zakończone ładowanie), więc jest używany tylko jako backstop na wypadek, gdy wcześniejsze wydarzenia nie działają z jakiegoś powodu.

Jeśli spędzasz trochę czasu Googling, znajdziesz kod, aby to zrobić. Sądzę, że najbardziej Vetted Code jest w dużych ramach, takich jak jQuery i yui, nawet jeśli nie używam tego ram, patrzę w kod źródłowy dla technik.

Oto główna część źródła jQuery 1.6.2 dla document.ready():

bindReady: function() {
    if ( readyList ) {
        return;
    }

    readyList = jQuery._Deferred();

    // Catch cases where $(document).ready() is called after the
    // browser event has already occurred.
    if ( document.readyState === "complete" ) {
        // Handle it asynchronously to allow scripts the opportunity to delay ready
        return setTimeout( jQuery.ready, 1 );
    }

    // Mozilla, Opera and webkit nightlies currently support this event
    if ( document.addEventListener ) {
        // Use the handy event callback
        document.addEventListener( "DOMContentLoaded", DOMContentLoaded, false );

        // A fallback to window.onload, that will always work
        window.addEventListener( "load", jQuery.ready, false );

    // If IE event model is used
    } else if ( document.attachEvent ) {
        // ensure firing before onload,
        // maybe late but safe also for iframes
        document.attachEvent( "onreadystatechange", DOMContentLoaded );

        // A fallback to window.onload, that will always work
        window.attachEvent( "onload", jQuery.ready );

        // If IE and not a frame
        // continually check to see if the document is ready
        var toplevel = false;

        try {
            toplevel = window.frameElement == null;
        } catch(e) {}

        if ( document.documentElement.doScroll && toplevel ) {
            doScrollCheck();
        }
    }
},
10
jfriend00 11 listopad 2011, 22:21

Jeśli poleganie na document.readyState jest OK, szybki i brudny roztwór z odpytywaniem:

(function() {
    var state = document.readyState;
    if(state === 'interactive' || state === 'complete') {
        // do stuff
    }
    else setTimeout(arguments.callee, 100);
})();
9
Christoph 11 listopad 2011, 23:22

Działa to dla wszystkich przeglądarek i jest krótki i zwięzły:

var execute = function () {
  alert("executing code");  
};

if ( !!(window.addEventListener) )
  window.addEventListener("DOMContentLoaded", execute)
else // MSIE
  window.attachEvent("onload", execute)
8
rogerdpack 28 październik 2016, 17:44

Wydarzenie DOMContentLoaded jest zwolnione, gdy początkowe dokument HTML został całkowicie załadowany i przeanalizowany, bez oczekiwania na arkusze stylów, obrazów i podramki, aby zakończyć ładowanie

document.addEventListener("DOMContentLoaded", function(event) 
{
    console.log("DOM fully loaded and parsed");
}

Uwaga: Internet Explorer 8 obsługuje zdarzenie ReadyStatechange, które można wykorzystać do wykrycia, gdy dom jest gotowy.

4
Malik Khalil 29 maj 2016, 10:25

Oto jeden sposób przez uruchomiony skrypt na dole strony. Oprócz przy użyciu okna.onload możesz poczekać na załadowanie wszystkich obrazów / skryptów. Lub możesz po prostu umieścić kod na dole, nie czekając na załadowanie obrazów.

<html>
<head>
</head>
<body>
</body>
<script language="text/javascript">
  window.onload = (function (oldOnLoad) {
    return function () {
      if (oldOnLoad) { 
        olOnLoad();  //fire old Onload event that was attached if any.
      }
      // your code to run after images/scripts are loaded
    }
  })(window.onload);

  // your code to run after DOM is loaded
</script>
</html>

Edytowany: dla komentarza w Vilx

Wiele wiązań Onload tutaj jest przykładem http://jsfiddle.net/utf2n/3/

2
John Hartsock 11 listopad 2011, 22:32