GlobalEventHandlers.onload

  • Revision slug: DOM/window.onload
  • Revision title: window.onload
  • Revision id: 91427
  • Created:
  • Creator: gingacodemonkey
  • Is current revision? No
  • Comment one or more formatting changes

Revision Content

{{ DomRef() }}

Summary

An event handler for the load event of a window.

Syntax

window.onload = funcRef;
  • funcRef is the handler function.

Example

window.onload = function() {
  init();
  doSomethingElse();
};
<html>
<head>

<title>onload test</title>

<script type="text/javascript">

window.onload = load;

function load()
{
 alert("load event detected!");
}
</script>
</head>

<body>
<p>The load event fires when the document has finished loading!</p>
</body>
</html>

Notes

The load event fires at the end of the document loading process. At this point, all of the objects in the document are in the DOM, and all the images and sub-frames have finished loading.

There is also Gecko-Specific DOM Events like DOMContentLoaded and DOMFrameContentLoaded events (which can be handled using addEventListener) which are fired after the DOM for the page has been constructed, but don't wait for other resources to finish loading.

Specification

{{ DOM0() }}

See also

{{ languages( { "fr": "fr/DOM/window.onload", "pl": "pl/DOM/window.onload" } ) }}

Revision Source

<p>{{ DomRef() }}</p>
<h3 name="Summary">Summary</h3>
<p>An event handler for the load event of a <a href="/en/DOM/window" title="en/DOM/window">window</a>.</p>
<h3 name="Syntax">Syntax</h3>
<pre class="eval">window.onload = <em>funcRef</em>;
</pre>
<ul> <li><code>funcRef</code> is the handler function.</li>
</ul>
<h3 name="Example">Example</h3>
<pre class="brush: js">window.onload = function() {
  init();
  doSomethingElse();
};
</pre>
<pre>&lt;html&gt;
&lt;head&gt;

&lt;title&gt;onload test&lt;/title&gt;

&lt;script type="text/javascript"&gt;

window.onload = load;

function load()
{
 alert("load event detected!");
}
&lt;/script&gt;
&lt;/head&gt;

&lt;body&gt;
&lt;p&gt;The load event fires when the document has finished loading!&lt;/p&gt;
&lt;/body&gt;
&lt;/html&gt;
</pre>
<h3 name="Notes">Notes</h3>
<p>The load event fires at the end of the document loading process. At this point, all of the objects in the document are in the DOM, and all the images and sub-frames have finished loading.</p>
<p>There is also <a href="/en/Gecko-Specific_DOM_Events" title="en/Gecko-Specific_DOM_Events">Gecko-Specific DOM Events</a> like <code>DOMContentLoaded</code> and <code>DOMFrameContentLoaded</code> events (which can be handled using <a href="/en/DOM/element.addEventListener" title="en/DOM/element.addEventListener"><code>addEventListener</code></a>) which are fired after the DOM for the page has been constructed, but don't wait for other resources to finish loading.</p>
<h3 name="Specification">Specification</h3>
<p>{{ DOM0() }}</p>
<h3>See also</h3>
<ul> <li>DOMContentLoaded event in <a href="/En/Listening_to_events#Simple_DOM.c2.a0events" title="En/Listening to events#Simple DOM.c2.a0events">Listening to events: Simple DOM events</a></li>
</ul>
<p>{{ languages( { "fr": "fr/DOM/window.onload", "pl": "pl/DOM/window.onload" } ) }}</p>
Revert to this revision