Please note, this is a STATIC archive of website developer.mozilla.org from 03 Nov 2016, cach3.com does not collect or store any user information, there is no "phishing" involved.

Revision 1040448 of load

  • Revision slug: Web/Events/load
  • Revision title: load
  • Revision id: 1040448
  • Created:
  • Creator: peterkinalex
  • Is current revision? No
  • Comment Technical review completed.

Revision Content

The load event is fired when a resource and its dependent resources have finished loading.

General info

Specification
DOM L3
Interface
UIEvent
Bubbles
No
Cancelable
No
Target
Document, Element
Default Action
None.

Properties

{{OpenEventProperties()}}{{UIEventProperties()}}{{CloseEventProperties()}}

Example

<script>
  document.addEventListener("load", function(event) {
    console.log("All resources finished loading!");
  });
</script>

Note: More reliable is to add event listener on "window.addEventListener".

{{LoadRelatedEvents()}}

Revision Source

<p>The <code>load</code> event is fired when a resource and its dependent resources have finished loading.</p>

<h2 id="General_info">General info</h2>

<dl>
 <dt style="float: left; text-align: right; width: 120px;">Specification</dt>
 <dd style="margin: 0 0 0 120px;"><a class="external" href="https://www.w3.org/TR/DOM-Level-3-Events/#event-type-load">DOM L3</a></dd>
 <dt style="float: left; text-align: right; width: 120px;">Interface</dt>
 <dd style="margin: 0 0 0 120px;">UIEvent</dd>
 <dt style="float: left; text-align: right; width: 120px;">Bubbles</dt>
 <dd style="margin: 0 0 0 120px;">No</dd>
 <dt style="float: left; text-align: right; width: 120px;">Cancelable</dt>
 <dd style="margin: 0 0 0 120px;">No</dd>
 <dt style="float: left; text-align: right; width: 120px;">Target</dt>
 <dd style="margin: 0 0 0 120px;">Document, Element</dd>
 <dt style="float: left; text-align: right; width: 120px;">Default Action</dt>
 <dd style="margin: 0 0 0 120px;">None.</dd>
</dl>

<h2 id="Properties">Properties</h2>

<p>{{OpenEventProperties()}}{{UIEventProperties()}}{{CloseEventProperties()}}</p>

<h2 id="Example">Example</h2>

<pre class="brush: html">&lt;script&gt;
  document.addEventListener("load", function(event) {
    console.log("All resources finished loading!");
  });
&lt;/script&gt;
</pre>

<p>Note: More reliable is to add event listener on "window.addEventListener".</p>

<h2 id="Related_Events">Related Events</h2>

<p>{{LoadRelatedEvents()}}</p>
Revert to this revision