JavaScript window.onload
Category Programming Technology
The window.onload() method is used to execute operations immediately after the webpage has finished loading, meaning that once the HTML document is fully loaded, a specific method is executed.
window.onload() is commonly used in the <body> element to execute script code after the page has fully loaded, including images, CSS files, etc.
Syntax for a single function to be executed:
window.onload = funcRef;
The funcRef method will be called after the page has loaded.
Syntax for multiple functions to be executed:
window.onload = function() {
Func1();
Func2();
Func3();
.....
}
Func1, Func2, Func3 will be executed sequentially after the page has loaded.
Why use window.onload()?
Because JavaScript functions and methods need the HTML document to be rendered before they can be used. If the rendering is not complete, the DOM tree is incomplete, which might lead to "undefined" errors when some JavaScript code is invoked.
Example
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<title>Testing without window.onload()</title>
<style type="text/css">
#bg {
width:120px;
height:120px;
border:4px solid blue;
}
</style>
<script type="text/javascript">
document.getElementById("bg").style.backgroundColor = "#F00";
</script>
</head>
<body>
<div id="bg"></div>
</body>
</html>
In the above example, we aim to set the background color of the div to #F90, but it doesn't achieve this effect because the code executes sequentially. When it reaches document.getElementById("#bg").style.backgroundColor = "#F00"
, the div object hasn't been loaded yet, so the background color isn't set successfully. The error message is as follows:
We can add window.onload to execute normally. The modified code is as follows:
Example
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<title>Testing with window.onload()</title>
<style type="text/css">
#bg {
width:120px;
height:120px;
border:4px solid blue;
}
</style>
<script type="text/javascript">
window.onload = function() {
document.getElementById("bg").style.backgroundColor = "#F00";
}
</script>
</head>
<body>
<div id="bg"></div>
</body>
</html>
The window.onload event binds the event handler function, which is an anonymous function. It can also bind a named function. The code example is as follows:
Example
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<title>Binding a specific function with window.onload()</title>
<script type="text/javascript">
// Function named tutorialpro
window.onload = function tutorialpro() {
document.write("tutorialpro.org -- Not just learning technology, but also dreams!!!");
}
</script>
</head>
<body>
</body>
</html>
Example for multiple functions to be executed:
Example
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<title>Executing multiple functions with window.onload()</title>
<style type="text/css">
#bg {
width:100px;
height:100px;
border:2px solid blue;
}
</style>
<script type="text/javascript">
window.onload = function() {
function tutorialpro1() {
document.getElementById("bg").style.backgroundColor = "#F00";
}
function tutorialpro2() {
document.getElementById("bg").style.width = "200px";
document.getElementById("bg").style.height = "200px";
}
tutorialpro1();
tutorialpro2();
}
</script>
</head>
<body>
<div id="bg"></div>
</body>
</html>
Differences between window.onload and jQuery ready()
window.onload = function () {}; // JavaScript
$(document).ready(function () {}); // jQuery
Both methods execute DOM operations after the HTML document is fully loaded, but they have some differences, as shown in the following diagram:
** Click me to share notes
-
-
-