In order to access this site you need to enable JavaScript!

You are here: Reference > JavaScript > client-side > event handling > events > onload

onload event | load event

Browser support:

Occurs when an object has been loaded.

The onload events for the body, window and document (only in Opera before version 10.5) objects are the same. They fire after all objects in the DOM hierarchy (images, sub-frames, ...) have finished loading and the document object has been built up. At that point, you can access the elements of the document (such as getElementById, getElementsByName), you can manipulate the contents of the document, etc.

How to register:

In HTML:

In JavaScript:

object.onload = handler;

object.addEventListener ("load", handler, useCapture);

9

object.attachEvent ("onload", handler);

You can find the related objects in the Supported by objects section below.

The event object is accessible to all event handlers in all browsers. The properties of the event object contain additional information about the current event. To get further details about these properties and the possible event handler registration methods, please see the page for the event object.

For a complete list of events, see the page for Events in JavaScript.

Basic information:

Bubbles	No
Cancelable	No
Event object	-

Actions that invoke the onload event:

If the document or an element has been loaded.

Events related to the onload event:

The onreadystatechange event of elements, the onreadystatechange event of the HTML document, the onreadystatechange event of the XMLDocument object and the onreadystatechange event of the XMLHttpRequest object fire when the load state changes.
The onstop event of the document occurs when the user aborts the loading of the document. In that case, the onload event is not fired.
The onabort event of an img or input:image element occurs when the user aborts the loading of the image. In that case, the onload event is not fired.
The ondataavailable event of an XMLDocument object occurs when a new chunk of data becomes available from the source.
The onbeforeunload and onunload events are fired before the document is unloaded.

Example HTML code 1:

This example illustrates the use of the onload event for the body element:

<head>
    <script type="text/javascript">
        function OnLoadDocument () {
            alert ("The document has been loaded.");
            document.body.style.backgroundColor = "red";
        }
    </script>
</head>
<body onload="OnLoadDocument ();">
</body>

Copy Code

Preview

Syntax Highlighter

Did you find this example helpful? yes no

Example HTML code 2:

This example illustrates the use of the onload event for img elements:

<head>
    <script type="text/javascript">
            // Internet Explorer specific
        function OnAbortImage () {
            var info = document.getElementById ("info");
            info.innerHTML += "<br />The loading of the image has been aborted.";
            RemoveEsc ();
        }

        function OnLoadImage () {
            var info = document.getElementById ("info");
            info.innerHTML += "<br />The image has been loaded.";
            RemoveEsc ();
        }

            // Internet Explorer specific
        function OnStateChangeImage (image) {
            var info = document.getElementById ("info");
            info.innerHTML += "<br />readyState: " + image.readyState;
        }

        function RemoveEsc () {
            var esc = document.getElementById ("esc");
            esc.parentNode.removeChild (esc);
        }
    </script>
</head>
<body>
    <span id="info" style="color:red">The image is loading.</span>
    <br /><br />
    <span id="esc">Press the Escape key to abort the process.</span>
    <br /><br />
    <img src="large.bmp" width="200px" height="150px" 
        onabort="OnAbortImage ()" onload="OnLoadImage ()" onreadystatechange="OnStateChangeImage (this)" />
</body>

Copy Code

Preview

Syntax Highlighter

Did you find this example helpful? yes no

Example HTML code 3:

This example illustrates the use of the onload event for XMLDocument objects. Note that this example does not work in Google Chrome and Safari, because they do not support the onload event for XMLDocument objects.

Code

ajax.js

<head>
    <script type="text/javascript" src="ajax.js"></script>
    
    <script type="text/javascript">
        var xmlDoc = null;

        function LoadXML () {
            xmlDoc = CreateXMLDocumentObject ();    // defined in ajax.js
            if (!xmlDoc) {
                return;
            }

            var url = "large.xml";
            xmlDoc.async = true;

            if (xmlDoc.addEventListener) {  // Firefox, Opera, Google Chrome and Safari
                xmlDoc.addEventListener("load", OnLoadXML, false);
            }
            else {
                xmlDoc.onreadystatechange = OnStateChange;
            }

            xmlDoc.load (url);
        }

        function OnLoadXML () {
            LoadingFinished ();
        }

        function OnStateChange () {
            var output = document.getElementById ("output");
            switch (xmlDoc.readyState) {
            case 1:
                output.innerHTML += "The load method was called, but no data has been received yet.<br/>";
                break;
            case 2:
                output.innerHTML += "A part of the data has been loaded, but the document object model (DOM) is not yet available.<br/>";
                break;
            case 3:
                output.innerHTML += "The document object model has been built from the received data and it is available.<br/>";
                break;
            case 4:
                LoadingFinished ();
                break;
            };
        }

        function LoadingFinished () {
            var output = document.getElementById ("output");
            output.innerHTML += "All data has been loaded, the operation is finished:<br/>";

            var errorMsg = null;
            if (xmlDoc.parseError && xmlDoc.parseError.errorCode != 0) {
                errorMsg = "XML Parsing Error: <span style='color:red'>" + xmlDoc.parseError.reason
                          + " at line " + xmlDoc.parseError.line
                          + " at position " + xmlDoc.parseError.linepos
                          + "</span><br/>";
            }
            else {
                if (xmlDoc.documentElement) {
                    if (xmlDoc.documentElement.nodeName == "parsererror") {
                        errorMsg = "<span style='color:red'>" + xmlDoc.documentElement.childNodes[0].nodeValue + "</span><br/>";
                    }
                }
            }
            if (errorMsg) {
                output.innerHTML += errorMsg;
            }
            else {
                output.innerHTML += "<span style='color:blue'>The XML is valid.</span><br/>";
            }
        }
    </script>
</head>
<body>
    <button onclick="LoadXML ()">Analyze the loading process of an XML</button>
    <br/><br/>
    <div id="output" style="width:420px; height:200px; overflow:auto; border:1px solid #000000; background-color:#f5e4b1;"></div>
</body>


function CreateHTTPRequestObject () {
        // although IE supports the XMLHttpRequest object, but it does not work on local files.
    var forceActiveX = (window.ActiveXObject && location.protocol === "file:");
    if (window.XMLHttpRequest && !forceActiveX) {
        return new XMLHttpRequest();
    }
    else {
        try {
            return new ActiveXObject("Microsoft.XMLHTTP");
        } catch(e) {}
    }
    alert ("Your browser doesn't support XML handling!");
    return null;
}

function CreateMSXMLDocumentObject () {
    if (typeof (ActiveXObject) != "undefined") {
        var progIDs = [
                        "Msxml2.DOMDocument.6.0", 
                        "Msxml2.DOMDocument.5.0", 
                        "Msxml2.DOMDocument.4.0", 
                        "Msxml2.DOMDocument.3.0", 
                        "MSXML2.DOMDocument", 
                        "MSXML.DOMDocument"
                      ];
        for (var i = 0; i < progIDs.length; i++) {
            try { 
                return new ActiveXObject(progIDs[i]); 
            } catch(e) {};
        }
    }
    return null;
}

function CreateXMLDocumentObject (rootName) {
    if (!rootName) {
        rootName = "";
    }
    var xmlDoc = CreateMSXMLDocumentObject ();
    if (xmlDoc) {
        if (rootName) {
            var rootNode = xmlDoc.createElement (rootName);
            xmlDoc.appendChild (rootNode);
        }
    }
    else {
        if (document.implementation.createDocument) {
            xmlDoc = document.implementation.createDocument ("", rootName, null);
        }
    }
    
    return xmlDoc;
}

function ParseHTTPResponse (httpRequest) {
    var xmlDoc = httpRequest.responseXML;

            // if responseXML is not valid, try to create the XML document from the responseText property
    if (!xmlDoc || !xmlDoc.documentElement) {
        if (window.DOMParser) {
            var parser = new DOMParser();
            try {
                xmlDoc = parser.parseFromString (httpRequest.responseText, "text/xml");
            } catch (e) {
                alert ("XML parsing error");
                return null;
            };
        }
        else {
            xmlDoc = CreateMSXMLDocumentObject ();
            if (!xmlDoc) {
                return null;
            }
            xmlDoc.loadXML (httpRequest.responseText);

        }
    }

            // if there was an error while parsing the XML document
    var errorMsg = null;
    if (xmlDoc.parseError && xmlDoc.parseError.errorCode != 0) {
        errorMsg = "XML Parsing Error: " + xmlDoc.parseError.reason
                  + " at line " + xmlDoc.parseError.line
                  + " at position " + xmlDoc.parseError.linepos;
    }
    else {
        if (xmlDoc.documentElement) {
            if (xmlDoc.documentElement.nodeName == "parsererror") {
                errorMsg = xmlDoc.documentElement.childNodes[0].nodeValue;
            }
        }
    }
    if (errorMsg) {
        alert (errorMsg);
        return null;
    }

        // ok, the XML document is valid
    return xmlDoc;
}

    // returns whether the HTTP request was successful
function IsRequestSuccessful (httpRequest) {
        // IE: sometimes 1223 instead of 204
    var success = (httpRequest.status == 0 || 
        (httpRequest.status >= 200 && httpRequest.status < 300) || 
        httpRequest.status == 304 || httpRequest.status == 1223);
    
    return success;
}