HTML DOM onload Event Last Updated : 26 Nov, 2024 Comments Improve Suggest changes Like Article Like Report The HTML DOM onload event in HTML occurs when an object has been loaded. The onload event is mostly used within the <body> tag, in order to run the script on the web page that will load all the content completely. The onload event can be used to check the user's browser type and browser version and load the version of the web page based on the information. The onload event can also be used for cookies. In HTML:<element onload="scriptFile"> HTML <!DOCTYPE html> <html> <body> <img src="https://media.geeksforgeeks.org/wp-content/uploads/20211113003851/geeks-300x83.png" id="imgid" alt="GFG_logo" onload="document.getElementById('pid').innerHTML = 'Image loaded';"> <p id="pid"></p> </body> </html> Using the addEventListener() method:object.addEventListener("load", scriptFile); HTML <!DOCTYPE html> <html> <body> <img src= "https://media.geeksforgeeks.org/wp-content/uploads/20211113003851/geeks-300x83.png" id="imgid" alt="GFG_logo"> <p id="pid"></p> <script> document.getElementById("imgid") .addEventListener("load", GFGFun); function GFGFun() { document.getElementById("pid") .innerHTML = "Image loaded"; } </script> </body> </html> In JavaScript:object.onload = function(){scriptFile}; HTML <!DOCTYPE html> <html> <body> <img src="https://media.geeksforgeeks.org/wp-content/uploads/20211113003851/geeks-300x83.png" id="imgid" alt="GFG_logo"> <p id="pid"></p> <script> // Set the onload event for the image document.getElementById("imgid").onload = function () { document.getElementById("pid").innerHTML = "Image loaded"; }; </script> </body> </html> Supported tags:<body>: It is used to define the main content present inside an HTML page.<frame>: It is used to divide the web browser window into multiple sections where each section can be loaded separately.<iframe>: It is used to define a rectangular region within the document in which the browser can display a separate document, including scrollbars and borders.<img>: It is used to add images inside a webpage/website.<input type="image">: It is used to specify the type of <input> element to display.<link>: It is used to define a link between a document and an external resource.<script>: It is used to define the client-side script.<style>: It is used to modify our text, viewed in the page. Comment More infoAdvertise with us Next Article HTML DOM onload Event V Vijay Sirra Follow Improve Article Tags : Web Technologies HTML Web technologies HTML-DOM Similar Reads HTML | DOM onunload Event The onunload event in HTML occurs once the page is unloaded. for example, when the page is loading and the browser window has been closed by the user or submit a form, click on a link, etc. This event also occurs when the page is reloaded. Supported Tags <body> Syntax:  In HTML:  <element 1 min read HTML DOM onplay Event The DOM onplay event occurs when the audio/video is played. The audio/video can be played either by the user or programmatically. Supported Tags <audio> <video> Syntax: In HTML:<element onplay="myScript">In JavaScript: object.onplay = function(){myScript};In JavaScript, using the a 1 min read HTML DOM onloadstart Event The HTML DOM onloadstart event occurs when the loading process of a specified audio/video starts. events that occur during the loading process of an audio/video: onloadstartondurationchangeonloadedmetadataonloadeddataonprogressoncanplayoncanplaythrough Syntax: In HTML:<element onloadstart="myScri 1 min read HTML DOM onloadeddata Event The DOM onloadeddata event in HTML occurs when the current frame data is loaded but the next frame's data is not enough data to play the audio/video. Events that occur during the loading process of an audio/video: onloadstartondurationchangeonloadedmetadataonloadeddataonprogressoncanplayoncanplaythr 1 min read HTML | DOM onshow Event The onshow event occurs when a user right click on en element and <menu> element is shown as a context menu. Supported Tags <menu> Syntax: In HTML: <element onshow="Script">In JavaScript: object.onshow = function(){Script};In JavaScript, using the addEventListener() method: object. 1 min read HTML DOM onopen Event The DOM onopen event occurs on an open connection with an event source. Related events: onmessage: Received the message.onerror: The problem occurs. Syntax: Using JavaScript:object.onopen = function(){myScript};Using the addEventListener() method:object.addEventListener("open", myScript); Example: U 1 min read HTML DOM onbeforeunload Event The onbeforeunload event occurs when you click a text link or picture link or any kind of link which will bring you to a new page. This event will display a confirmation dialog box to inform the user whether the user wants to stay on the page or leave the current page and move on to the next linked 2 min read HTML | DOM onstalled Event The onstalled event in HTML DOM occurs when media data get by the browser but the data is not available. Syntax: In HTML: <element onstalled="myScript"> In JavaScript: object.onstalled = function(){myScript}; In JavaScript, using the addEventListener() method: object.addEventListener("stalled" 1 min read HTML DOM onabort Event The DOM onabort event occurs in the abortion of an audio/video loading. This event occurs when the downloading of media data is aborted without any error. Events that occur when some disruption comes in the media loading process are: onemptiedonerroronstalledonsuspend Supported Tags <audio> 1 min read HTML DOM oncanplay Event The HTML DOM oncanplay event occurs when a specified audio/video is buffered enough to begin. The order of events occurs During the loading process of an audio/video: onloadstartondurationchangeonloadedmetadataonloadeddataonprogressoncanplayoncanplaythrough Supported Tags <audio> <video> 1 min read Like