#05: Alles über DOM Ready

Wir haben uns ziemlich gut mit Selektoren beschäftigt. Ein jQuery-Selektor wie $(“h1”) wählt alle <h1>-Elemente auf der Seite aus. Aber was ist, wenn… wenn es das nicht tut? Hier ist ein Beispiel, wann dieser Selektor fehlschlagen würde.

<!doctype html>
<html lang="en">

<head>
  <meta charset="UTF-8">

  <title>Learning jQuery</title>

  <script src="js/jquery-2.0.3.js"></script>
  <script>
    $("h1").css("color", "red");
  </script>
</head>

<body>
  
  <h1>Hello, World!</h1>

</body>

</html>

Wird das <h1>-Element rot? Nein. WTF, oder? Der Grund, warum es nicht rot wird, ist, dass es, wenn dieser jQuery-Code ausgeführt wird, noch kein <h1> gibt, das er finden könnte. Es hat es noch nicht in das DOM geschafft. Das liegt daran, dass dein HTML von oben nach unten gelesen wird. Stell dir vor, der Browser liest die allererste Zeile, dann die nächste, dann die nächste. Wenn er zu der Zeile mit dem jQuery-Selektor kommt, kennt er nur diese Zeile und alles darüber. Also wird kein <h1> gefunden und es passiert keine Farbänderung.

Wie gehen wir mit diesem Problem um? Der beste Weg, damit umzugehen, ist, JavaScript-Dateien am Ende deiner Seite zu laden. Direkt über dem schließenden </body>-Tag. JavaScript-Dateien „blockieren“ das Rendern der Seite, während sie heruntergeladen und ausgeführt werden, daher wird deine Seite sowieso schneller geladen. Aber das bedeutet, dass unsere jQuery-Selektoren als Bonus alles finden, was sie finden sollen.

Das Laden der Skripte am Ende würde so aussehen:

<!doctype html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Learning jQuery</title>
</head>

<body>
  
  <h1>Hello, World!</h1>

  <script src="js/jquery-2.0.3.js"></script>
  <script>
    $("h1").css("color", "red");
  </script>

</body>

</html>

Manchmal werden Skripte jedoch im Kopf geladen. Dafür gibt es alle möglichen Ausreden, meistens schlechte, aber hey, werden wir nicht zu wertend, ohne Details =).

Wir können das Problem des Nicht-Findens von Elementen trotzdem auf eine ziemlich zufriedenstellende Weise lösen, auch wenn wir gezwungen sind, Skripte im Kopf zu laden. Das machen wir über die jQuery „DOM Ready“-Funktion. Wörtlich, wenn das Dokument fertig und bereit zur Manipulation ist. Es sieht so aus:

$(document).ready(function() {

});

Es gibt eine kürzere Version, die genau dasselbe tut:

$(function() {

});

Das Einpacken deines Codes in eine solche Funktion stellt sicher, dass er erst ausgeführt wird, wenn das Dokument bereit ist. Es ist tatsächlich ein ziemlich cleverer Code, der das leistet, was natürlich schwer plattformübergreifend zu machen ist. Das Coole daran ist, dass es ziemlich schnell ist. Es ist nicht dasselbe wie das Warten auf das vollständige Laden des Fensters, was langsam ist, da es darauf wartet, dass alle Ressourcen vollständig heruntergeladen sind, bevor es ausgelöst wird. DOM Ready passiert viel früher. Wenn du darauf warten musst, dass Ressourcen fertig sind (z.B. du musst ein Bild messen), kannst du darauf so warten:

$(window).load(function() {

});

Wenn wir unser früheres Problem mit JavaScript im Kopf mit DOM Ready lösen, würde der Code so aussehen:

<!doctype html>
<html lang="en">

<head>
  <meta charset="UTF-8">

  <title>Learning jQuery</title>

  <script src="js/jquery-2.0.3.js"></script>
  <script>
  $(function() {
    $("h1").css("color", "red");
  });
  </script>
</head>

<body>
  
  <h1>Hello, World!</h1>

</body>

</html>

Ron Gilmour

# 17. November 2013

Hm. Ich hatte die Vorstellung, dass jQuery **unbedingt** eine „document ready“-Wrapper braucht, aber ich schätze, das ist nur, wenn dein Code im Kopf steht. Danke für die Klärung. Ich werde jetzt etwas Code aufräumen.

Antworten

Richard Finelli

# 14. Dezember 2013

Ja, ich hatte die gleiche Vorstellung wie Ron. Und jetzt verstehe ich, wozu der Kurzcode für dom ready ist, was viel erklärt.

ricardo garcia

# 23. Juli 2015

Ich wusste nicht, dass es dafür einen Kurzcode gibt. Ich habe das noch in keinem Tutorial gesehen, was bedeutet, dass es immer besser und besser wird. Danke Chris, ich liebe deine Methodik :)

Greg

# 29. August 2015

Hallo, danke für diese Erklärung. Macht die Dinge klar. Kannst du bestätigen, dass die folgenden Codebeispiele gleichwertig sind?

$(document).ready(function(){
    //example
    $('h1').css("color", "blue");
});

gleich wie

jQuery(document).ready(function($){
    //example
    $('h1').css("color", "blue");
});

$(function() {
    //example
    $('h1').css("color", "blue");
});

jQuery(function($) {
    //example
    $('h1').css("color", "blue");

});

Ich glaube, ich mag jQuery(function($)> am besten, weil ich kein noConflict.js-Datei im Dokument einfügen muss.

Chris Coyier

Permalink zum Kommentar# 1. September 2015
Diese werden tatsächlich alle gleich funktionieren. Und ja, die letzte (gleich wie die zweite) erlaubt es dir, das $ sicher von innen zu verwenden, ohne Konflikte. Du brauchst aber nicht immer eine DOM Ready-Anweisung (wie alle vier davon), zum Beispiel, wenn du Skripte korrekt am Ende der Seite lädst (das DOM wird bereits bereit sein). Das ist also ein Muster mit der gleichen Sicherheit ohne DOM Ready.
```
(function($){  
  // use $ here safely
})(jQuery);
```

Rachel

# 30. Januar 2017

tolles Video :) wie wenn du sagst, wir könnten das auch machen oder was auch immer… lol

Kommentare

Eine Antwort hinterlassen Antwort abbrechen