$(document).ready entspricht ohne jQuery

Question

Ich habe ein Skript, das Folgendes verwendet $(document).ready , aber es verwendet nichts anderes von jQuery. Ich möchte es durch Entfernen der jQuery-Abhängigkeit aufhellen.

Wie kann ich meine eigene $(document).ready Funktionalität ohne jQuery zu verwenden? Ich weiß, dass mit window.onload wird nicht dasselbe sein, da window.onload wird ausgelöst, nachdem alle Bilder, Rahmen usw. geladen wurden.

Answer 1

Browserübergreifend (auch alte Browser) und eine einfache Lösung:

var docLoaded = setInterval(function () {
    if(document.readyState !== "complete") return;
    clearInterval(docLoaded);

    /*
        Your code goes here i.e. init()
    */
}, 30);

Alarm in jsfiddle anzeigen

Answer 2

Ich habe dies kürzlich für eine mobile Website verwendet. Dies ist die vereinfachte Version von John Resig aus "Pro JavaScript Techniques". Sie hängt von addEvent ab.

var ready = ( function () {
  function ready( f ) {
    if( ready.done ) return f();

    if( ready.timer ) {
      ready.ready.push(f);
    } else {
      addEvent( window, "load", isDOMReady );
      ready.ready = [ f ];
      ready.timer = setInterval(isDOMReady, 13);
    }
  };

  function isDOMReady() {
    if( ready.done ) return false;

    if( document && document.getElementsByTagName && document.getElementById && document.body ) {
      clearInterval( ready.timer );
      ready.timer = null;
      for( var i = 0; i < ready.ready.length; i++ ) {
        ready.ready[i]();
      }
      ready.ready = null;
      ready.done = true;
    }
  }

  return ready;
})();

Answer 3

Die jQuery-Antwort war ziemlich nützlich für mich. Mit ein wenig Nacharbeit passte sie gut zu meinen Bedürfnissen. Ich hoffe, sie hilft auch anderen.

function onReady ( callback ){
    var addListener = document.addEventListener || document.attachEvent,
        removeListener =  document.removeEventListener || document.detachEvent
        eventName = document.addEventListener ? "DOMContentLoaded" : "onreadystatechange"

    addListener.call(document, eventName, function(){
        removeListener( eventName, arguments.callee, false )
        callback()
    }, false )
}

Answer 4

Hier ist die kleinster Codeschnipsel zum Testen von DOM ready die in allen Browsern funktioniert (sogar im IE 8):

r(function(){
    alert('DOM Ready!');
});
function r(f){/in/.test(document.readyState)?setTimeout('r('+f+')',9):f()}

Siehe dies Antwort .

Answer 5

Fügen Sie dies einfach am Ende Ihrer HTML-Seite ein...

<script>
    Your_Function();
</script>

Denn HTML-Dokumente werden von oben nach unten geparst.