$(document).ready ohne jQuery: moderne Alternativen im Jahr 2025

Warum man sich 2025 von jQuery für $(document).ready verabschieden sollte?

Wenn Sie immer noch $(document).ready(function() { ... }) schreiben – arbeiten Sie entweder an einem Legacy-Projekt oder verpassen die Möglichkeiten modernen JavaScripts. Im Jahr 2025 ist jQuery wie ein Knopfhandy: es funktioniert, aber alle sind längst auf Touchscreens umgestiegen.

Auf Stack Overflow hat die Frage $(document).ready equivalent without jQuery Hunderttausende von Aufrufen gesammelt. Das bedeutet, dass Entwickler weltweit nach leichten, schnellen und modernen Wegen suchen, Code nach dem DOM-Laden auszuführen. Und die Antwort ist einfach: Die native Browserunterstützung deckt bereits seit langem 100% der Anforderungen ab, die einst jQuery löste.

In diesem Artikel behandeln wir 3 beste Methoden, um $(document).ready durch reines JavaScript zu ersetzen, besprechen Leistungsnuancen und zeigen echte Codebeispiele, die Sie noch heute verwenden können.

DOMContentLoaded – der Hauptakteur ohne jQuery

Das direkteste Äquivalent zu $(document).ready ist das Ereignis DOMContentLoaded. Es wird ausgelöst, wenn der Browser das HTML-Dokument vollständig geladen und geparst hat, aber vor dem Laden von Bildern, Stylesheets und anderen Ressourcen. Genau das tat jQuery unter der Haube.

So sieht die grundlegende Syntax aus:

document.addEventListener('DOMContentLoaded', function() {\n    // Ihr Code wird nach vollständigem DOM-Laden ausgeführt\n    console.log('DOM vollständig geladen und bereit!');\n    document.querySelector('.header').style.color = '#2c3e50';\n});

Warum ist das besser als jQuery?

\n
• Geschwindigkeit: Keine Notwendigkeit, 30+ KB Bibliothek für eine einzige Funktion zu laden.
\n
• Kontrolle: Sie wissen genau, was zum Zeitpunkt des Ladens passiert.
\n
• Kompatibilität: Funktioniert in allen modernen Browsern (IE9+, Chrome, Firefox, Safari, Edge).
\n

Es gibt jedoch eine Nuance: Wenn Ihr Skript nach dem DOM-Laden eingebunden wird, wird das Ereignis nicht mehr ausgelöst. Die Lösung ist eine Überprüfung von document.readyState:

function ready(fn) {\n    if (document.readyState !== 'loading') {\n        fn(); // DOM bereits geladen\n    } else {\n        document.addEventListener('DOMContentLoaded', fn);\n    }\n}\nready(function() {\n    console.log('Wird garantiert nach DOM-Laden ausgeführt');\n});

Dieses Pattern ist der Goldstandard für den Ersatz von $(document).ready im Jahr 2025.

Das defer-Attribut: der einfachste Weg ohne eine einzige Codezeile

Was wäre, wenn ich Ihnen sage, dass Sie DOMContentLoaded gar nicht schreiben müssen? Das Attribut defer im <script>-Tag erledigt die ganze Arbeit für Sie:

<script src="script.js" defer></script>

Wie funktioniert das? Der Browser lädt das Skript parallel zum HTML, führt es aber erst nach vollständigem Parsen des Dokuments aus. Dies ist gleichbedeutend damit, dass der gesamte Code in script.js automatisch in $(document).ready eingewickelt ist.

Vorteile:

\n
• Null zusätzlicher Code – fügen Sie einfach das Attribut hinzu.
\n
• Skripte mit defer werden in der Reihenfolge ihres Auftretens im HTML ausgeführt.
\n
• Funktioniert in 97% der Browser (einschließlich älterer Safari-Versionen).
\n

Wann verwenden? Ideal für normale Skripte, die mit dem DOM arbeiten sollen, aber das Rendern nicht blockieren. Zum Beispiel:

<script src="analytics.js" defer></script>\n<script src="app.js" defer></script>\n<!-- app.js wird nach analytics.js, aber vor window.onload ausgeführt -->

Vergleichen Sie mit jQuery: $(document).ready innerhalb von app.js ist überflüssiger Code. Mit defer schreiben Sie einfach:

// app.js — n