1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
|
---
title: DOMContentLoaded
slug: Web/Events/DOMContentLoaded
translation_of: Web/API/Window/DOMContentLoaded_event
---
<p>El evento <code>DOMContentLoaded</code> es disparado cuando el documento HTML ha sido completamente cargado y parseado, sin esperar hojas de estilo, images y subframes para finalizar la carga. Un evento muy diferente - <a href="/en-US/docs/Mozilla_event_reference/load"><code>load</code></a> - debería ser usado solo para detectar una carga completa de la página. Es un error increíblemente popular usar <a href="/en-US/docs/Mozilla_event_reference/load"><code>load</code></a> cuando <code>DOMContentLoaded</code> sería mucho más apropiado, así que úsalo con cuidado.</p>
<p>JavaScript síncrono pausa el parseo del DOM.</p>
<p>También hay mucho propósito general y bibliotecas autónomas que ofrecen métodos de navegador cruzado para detectar que el DOM está preparado.</p>
<h2 id="Speeding_up">Speeding up</h2>
<p>If you want DOM to get parsed as fast as possible after the user had requested the page, some things you could do is turn your <a href="https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/Synchronous_and_Asynchronous_Requests">JavaScript asynchronous</a> and to <a href="https://developers.google.com/speed/docs/insights/OptimizeCSSDelivery">optimize loading of stylesheets</a> which if used as usual, slow down page load due to being loaded in parallel, "stealing" traffic from the main html document.</p>
<h2 id="General_info">General info</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;">Yes</dd>
<dt style="width: 120px; text-align: right; float: left;">Cancelable</dt>
<dd style="margin: 0px 0px 0px 120px;">Yes (although specified as a simple event that isn't cancelable)</dd>
<dt style="width: 120px; text-align: right; float: left;">Target</dt>
<dd style="margin: 0px 0px 0px 120px;">Document</dd>
<dt style="width: 120px; text-align: right; float: left;">Default Action</dt>
<dd style="margin: 0px 0px 0px 120px;">None.</dd>
</dl>
<h2 id="Properties">Properties</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>The event target (the topmost target in the DOM tree).</td>
</tr>
<tr>
<td><code>type</code> {{readonlyInline}}</td>
<td>{{domxref("DOMString")}}</td>
<td>The type of event.</td>
</tr>
<tr>
<td><code>bubbles</code> {{readonlyInline}}</td>
<td>{{jsxref("Boolean")}}</td>
<td>Whether the event normally bubbles or not.</td>
</tr>
<tr>
<td><code>cancelable</code> {{readonlyInline}}</td>
<td>{{jsxref("Boolean")}}</td>
<td>Whether the event is cancellable or not.</td>
</tr>
</tbody>
</table>
<h2 id="Example">Example</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++)
{} // this synchronous script is going to delay parsing of the DOM. So the DOMContentLoaded event is going to launch later.
</script>
</pre>
<h2 id="Browser_compatibility">Browser compatibility</h2>
<p>{{CompatibilityTable}}</p>
<div id="compat-desktop">
<table class="compat-table">
<tbody>
<tr>
<th>Feature</th>
<th>Chrome</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>{{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>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>{{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 for this event is supported by at least Gecko 1.9.2, Chrome 6, and Safari 4.</p>
<p>[2] Internet Explorer 8 supports the <code>readystatechange</code> event, which can be used to detect when the DOM is ready. In earlier versions of Internet Explorer, this state can be detected by repeatedly trying to execute <code>document.documentElement.doScroll("left");</code>, as this snippet will throw an error until the DOM is ready.</p>
<h2 id="Related_Events">Related Events</h2>
<ul>
<li>{{event("DOMContentLoaded")}}</li>
<li>{{event("readystatechange")}}</li>
<li>{{event("load")}}</li>
<li>{{event("beforeunload")}}</li>
<li>{{event("unload")}}</li>
</ul>
|
