Difference between body.onload() and document.ready() function

Difference between window.onload and body.onload

Last Updated : 10 Feb, 2021

There is a slight difference between the windows onload and the body onload, but before approaching the differences between them first we required the knowledge of what are those onloads. After, that we will know the usage in different scenarios of those where we will notice the slight differences between them.

onloads: The onloads event is fired when an object is fully loaded, there are two types of onload event one is windows onload and body onload.

Windows onload: This window's onload event fires at the start.
Body onload: This body onload event fires once all content is downloaded, if we want to find an element and update the style or content, then, body onload is the right choice to use.

Note: If update the style and content do not bother you then it does not matter which onload you are using.

The below example illustrates the differences between windows onload and body onload:

HTML

<!DOCTYPE html>
<html>
   <head>
   </head>
   <body onload="bodyLoad()">
      <div id="B1">
         <h1 style="color: green;">GeeksforGeeks</h1>
         
<p>A Computer Science Portal for Geeks</p>

      </div>
      <script>
        
        // Body onload
         function bodyLoad() {
             alert("Alert from body_onload");
             alert("content from d1: "
                   + document.getElementById("d1").innerText);
         }
         
         // Window onload 
         function winLoad() {
             alert("Alert from window_onload");
             if (document.getElementById("B1") != null) {
                 alert("Content from body: "
                       + document.getElementById("B1").innerText);
             }
             else {
                 alert("Failed to find B1");
             }
         }
         window.onload = winLoad();
      </script>
   </body>
</html>

Output:

Window onload:

Body onload:

Difference between body.onload() and document.ready() function

S

skyridetim

Improve

Article Tags :

Similar Reads

Difference between body.onload() and document.ready() function

The body.onload() event will be called once the DOM and all associated resources like images got loaded. Basically, onload() will be called when the page has been fully loaded with entire images, iframes and stylesheets, etc. For example, if our page contains a larger size image, so onload() event w

Difference between DOMContentLoaded and load Events

These two events In web development, the DOMContentLoaded and load events are used to detect when parts of the webpage are ready. The DOMContentLoaded event fires when the HTML is fully parsed and the DOM is ready, while the load event waits until all resources like images, scripts, and stylesheets

Difference between window.onkeypress and window.document.body.onkeypress

The onkeypress event can be triggered in JavaScript using both: window.onkeypresswindow.document.body.onkeypress To understand the difference between the two we need to have a look at the HTML DOM (Document Object Model): DOM is a model that represents the HTML document as a tree structure.The tree

What is the difference between DOM and BOM ?

In this article, we will know about the Document Object Model (DOM) & Browser Object Model (BOM), along with understanding their basic implementation through the examples & the differences between them. Document Object Model (DOM) is a programming interface for HTML and XML documents, that a

Difference between on() and live() or bind() in jQuery

jQuery offers various event handlers like on(), live() and bind(). Though, there are some minor differences which are discussed below. bind() method: This method only attaches events to elements which exist beforehand i.e. state of initialized document before the events are attached. If the selector

Difference between JavaScript and HTML

JavaScriptJavaScript is a programming language that conforms to the ECMAScript specification. It is a high-level scripting language introduced by Netscape to be run on the client-side of the web browser. It can insert dynamic text into HTML. JavaScript is also known as the browserâ€™s language. HTMLHT