Javascript Onload

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);