$(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

Die Funktion ready in jQuery tut eine Reihe von Dingen. Ehrlich gesagt, sehe ich keinen Grund, sie zu ersetzen, es sei denn, Sie haben einen erstaunlich geringen Output von Ihrer Website. jQuery ist eine ziemlich winzige Bibliothek, die alle Arten von Cross-Browser-Dingen handhabt, die Sie später brauchen werden.

Wie auch immer, es hat wenig Sinn, es hier zu posten, öffnen Sie einfach die jQuery und sehen Sie sich die bindReady méthode.

Es beginnt mit dem Aufruf von entweder document.addEventListener("DOMContentLoaded") o document.attachEvent('onreadystatechange') je nach Ereignismodell, und geht von dort aus weiter.

Answer 2

Versuchen Sie dies:

function ready(callback){
    if(typeof callback === "function"){
        document.addEventListener("DOMContentLoaded", callback);
        window.addEventListener("load", callback);
    }else{
        throw new Error("Sorry, I can not run this!");
    }
}
ready(function(){
    console.log("It worked!");
});

Answer 3

Kurz gesagt, anstelle des in jQuery verwendeten $(document).ready() können wir eine JavaScript-Methode verwenden:

<script>
    document.addEventListener("DOMContentLoaded", function_name, false);
    function function_name(){
        statements;
    }
</script>

Erst wenn die Seite fertig ist, d.h. DOMContentLoaded, wird die Funktion function_name() aufgerufen.

Answer 4

Wenn Sie Folgendes unterstützen möchten Internet Explorer 7+ (keine Macken, Kompatibilität und andere Schmerzen), zuletzt Chrom zuletzt Safari , letzter Firefox und keine iframes - wird dies ausreichen:

is_loaded = false
callbacks = []

loaded = ->
  is_loaded = true
  for i in [0...callbacks.length]
    callbacks[i].call document
  callbacks = []

content_loaded = ->
  document.removeEventListener "DOMContentLoaded", content_loaded, true
  loaded()

state_changed = ->
  if document.readyState is "complete"
    document.detachEvent "onreadystatechange", state_changed
    loaded()

if !!document.addEventListener
  document.addEventListener "DOMContentLoaded", content_loaded, true
else
  document.attachEvent "onreadystatechange", state_changed

dom_ready = (callback) ->
  if is_loaded
    callback.call document
  else
    callbacks.push callback