diff options
Diffstat (limited to 'files/de/web/events/domcontentloaded/index.html')
| -rw-r--r-- | files/de/web/events/domcontentloaded/index.html | 156 |
1 files changed, 156 insertions, 0 deletions
diff --git a/files/de/web/events/domcontentloaded/index.html b/files/de/web/events/domcontentloaded/index.html new file mode 100644 index 0000000000..d6841f774a --- /dev/null +++ b/files/de/web/events/domcontentloaded/index.html @@ -0,0 +1,156 @@ +--- +title: DOMContentLoaded +slug: Web/Events/DOMContentLoaded +tags: + - Referenz + - Web + - events +translation_of: Web/API/Window/DOMContentLoaded_event +--- +<p>Das <code>DOMContentLoaded</code>-Event wird ausgelöst, wenn das initiale HTML-Dokument vollständig geladen und geparst ist. Es wird dabei nicht auf Stylesheets, Bilder und Frames gewartet. Das <a href="/en-US/docs/Mozilla_event_reference/load"><code>load-Event</code></a> sollte im Gegensatz dazu nur benutzt werden um eine komplett geladene Seite zu erkennen. Es ist ein weit verbreiteter Fehler das <a href="/en-US/docs/Mozilla_event_reference/load"><code>load-Event</code></a> zu benutzen, obwohl <code>DOMContentLoaded</code> wesentlich besser geeignet wäre.</p> + +<p>{{Note("Synchrones JavaScript pausiert das Parsen des DOM.")}}</p> + +<p>{{Note("Es gibt viele Bibliotheken, die Methoden bereitstellen, um bei verschiedenen Browsern zu erkennen, ob das DOM bereit ist.")}}</p> + +<h2 id="Performanz">Performanz</h2> + +<p>Wenn DOM so schnell wie möglich geladen werden soll, nachdem der Benutzer die Seite angefragt hat, sollte zum einen das <a href="/en-US/docs/Web/API/XMLHttpRequest/Synchronous_and_Asynchronous_Requests">JavaScript asynchron</a> ausgeführt und <a href="https://developers.google.com/speed/docs/insights/OptimizeCSSDelivery">das Laden der Stylesheets optimiert</a> werden, was bei zu häufigem Einsatz den Aufbau der Seite durch das parallele Laden verlangsamen kann.</p> + +<h2 id="Allgemeine_Informationen">Allgemeine Informationen</h2> + +<dl> + <dt style="width: 120px; text-align: right; float: left;">Specification</dt> + <dd style="margin: 0px 0px 0px 120px;"><a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-end.html#the-end">HTML5</a></dd> + <dt style="width: 120px; text-align: right; float: left;">Interface</dt> + <dd style="margin: 0px 0px 0px 120px;">Event</dd> + <dt style="width: 120px; text-align: right; float: left;">Bubbles</dt> + <dd style="margin: 0px 0px 0px 120px;">Ja</dd> + <dt style="width: 120px; text-align: right; float: left;">Abbrechbar</dt> + <dd style="margin: 0px 0px 0px 120px;">Ja (Auch wenn es als ein einfaches Event spezifiziert ist, das nicht abgebrochen werden kann)</dd> + <dt style="width: 120px; text-align: right; float: left;">Ziel</dt> + <dd style="margin: 0px 0px 0px 120px;">Dokument</dd> + <dt style="width: 120px; text-align: right; float: left;">Standardaktion</dt> + <dd style="margin: 0px 0px 0px 120px;">Keine</dd> +</dl> + +<h2 id="Eigenschaften">Eigenschaften</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Property</th> + <th scope="col">Type</th> + <th scope="col">Description</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>target</code> {{readonlyInline}}</td> + <td>{{domxref("EventTarget")}}</td> + <td>Das Zielelement des Events (das oberste Ziel im DOM Baum).</td> + </tr> + <tr> + <td><code>type</code> {{readonlyInline}}</td> + <td>{{domxref("DOMString")}}</td> + <td>Der Typ des Events.</td> + </tr> + <tr> + <td><code>bubbles</code> {{readonlyInline}}</td> + <td>{{jsxref("Boolean")}}</td> + <td>Gibt an, ob das Event weiter nach oben wandert (bubble).</td> + </tr> + <tr> + <td><code>cancelable</code> {{readonlyInline}}</td> + <td>{{jsxref("Boolean")}}</td> + <td>Gibt and, ob das Event abbrechbar ist.</td> + </tr> + </tbody> +</table> + +<h2 id="Beispiel">Beispiel</h2> + +<pre class="brush: html"><script> + document.addEventListener("DOMContentLoaded", function(event) { + console.log("DOM fully loaded and parsed"); + }); +</script> +</pre> + +<pre class="brush: html"><script> + document.addEventListener("DOMContentLoaded", function(event) { + console.log("DOM fully loaded and parsed"); + }); + +for(var i=0; i<1000000000; i++) +{} // Dieses synchrone Script wird das Parsen des DOMs verzögern. Dadurch wird das DOMContentLoaded-Event erst später ausgelöst. +</script> +</pre> + +<h2 id="Browserkompatibilität">Browserkompatibilität</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Edge</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>1.0<sup>[1]</sup></td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("1")}}<sup>[1]</sup></td> + <td>9.0<sup>[2]</sup></td> + <td>9.0</td> + <td>3.1<sup>[1]</sup></td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Edge</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}<sup>[1]</sup></td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile("1")}}<sup>[1]</sup></td> + <td>{{CompatUnknown}}<sup>[2]</sup></td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}<sup>[1]</sup></td> + </tr> + </tbody> +</table> +</div> + +<p>[1] Bubbling für dieses Event benötigt mindestens Gecko 1.9.2, Chrome 6, and Safari 4.</p> + +<p>[2] Internet Explorer 8 unterstützt das <code>readystatechange</code>-Event, welches genutzt werden kann um festzustellen, wenn das DOM fertig ist. In früheren Versionen des Internet Explorers kann dieser Status festgestellt werden, indem wiederholt versucht wird, <code>document.documentElement.doScroll("left");</code> auszuführen. Dieser Befehl gibt einen Error zurück, bis das DOM bereit ist.</p> + +<h2 id="Verwandte_Events">Verwandte Events</h2> + +<ul> + <li>{{event("DOMContentLoaded")}}</li> + <li>{{event("readystatechange")}}</li> + <li>{{event("load")}}</li> + <li>{{event("beforeunload")}}</li> + <li>{{event("unload")}}</li> +</ul> |