jQuery: onload() Vs. $.ready()?

By: Rajesh P.S.

Both $(document).ready() in jQuery and body onload in traditional JavaScript are used to execute code when a web page is loaded, but they work differently and have some distinctions:

Execution Timing

$(document).ready() (or its shorthand $()) is a jQuery event that triggers when the DOM (Document Object Model) is fully parsed and ready for manipulation, even if external resources like images are still loading. This means it usually fires before the entire page, including images, has finished loading.
body onload is an attribute you can place in the HTML <body> tag. It executes the associated JavaScript function when the entire page, including external resources, has completely loaded.

Usage

$(document).ready() is often used when you want to manipulate the DOM or perform actions as soon as the DOM is ready but before all external resources have loaded. It's suitable for most cases where you want to work with the structure of the page.
body onload is typically used when you need to ensure that all page resources, including images and external scripts, are loaded before executing a particular action. This is essential if your JavaScript relies on the dimensions or content of external resources.

Continue Reading...

Example using $(document).ready():

<!DOCTYPE html> <html> <head> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <script> $(document).ready(function() { // This code executes when the DOM is ready. // It doesn't wait for images to load. console.log("Document is ready."); }); </script> </head> <body> <p>Hello, world!</p> </body> </html>

In this example, "Document is ready." will be logged to the console as soon as the DOM is ready, even before the image (if any) has fully loaded.

Example using body onload:

<!DOCTYPE html> <html> <head> </head> <body onload="pageLoad()"> <p>Hello, world!</p> <img src="example.jpg" alt="Example Image"> <script> function pageLoad() { // This code executes when the entire page, including images, is loaded. console.log("Page is fully loaded."); } </script> </body> </html>

In this example, "Page is fully loaded." will be logged to the console only after the entire page, including the image, has loaded.

Conclusion

The key difference is in when the code is executed: $(document).ready() fires when the DOM is ready, while body onload fires when the entire page, including external resources, is fully loaded. The choice between them depends on your specific use case and whether you need to interact with resources that might not be ready when the DOM is parsed.

Next > Is jQuery is a replacement of JavaScript?

Related Topics

More Related Topics.....