The onload event is a function or code that is executed after the page or window is fully loaded. But why do we use it? Generally, it is used to deal with cookies, or to display a certain version of the page according to the user’s browser type and/or version. Here’s how!
Syntax
The onload event, having a relatively easy syntax, is really easy to use. It has two main parts, the Javascript code for the function, and how it is called in the HTML part of your application.
See the code snippet below to get a more complete idea on how the function is called:
<tag onload="function()">
And this is how the code for the function is built in Javascript:
object.onload = function(){
//your code here
};
Let’s see now how it is used in real life.
Loading Images
If we want our page to say when the image is loaded, we would write the script below:
function loadImage() {
console.log("Image loaded");
}
And moreover, this script can be bound to the image like below:
<img src="path/to/image" onload="loadImage()" width="300" height="300">
Let’s see how we use onload for cookies.
Cookies
The onload event is an efficient way to deal with cookies too. Let’s consider an element with a custom ID where we will display the text if the cookies are enabled or not. You call the script like below:
<body onload="checkCookies()">
<p id="ourId"></p>
This is how the script is built:
function checkCookies() {
var text = "";
if (navigator.cookieEnabled == true) {
text = "Cookies are enabled.";
} else {
text = "Cookies are not enabled.";
}
document.getElementById("ourId").innerHTML = text;
}
However, this is the general way to use onload. Can we do it better? Of course.
Using onload properly
We mentioned that onload is used generally like this:
window.onload = function(){
//functionality when window loads
}
This works well enough until there are other functions hoked on window.onload. In that case only the last function will be executed. Which is why the onload is best used like below:
function myLoadEvent(myFunction) {
var oldOnLoad = window.onload;
if (typeof window.onload != 'function') {
window.onload = myFunction
} else {
window.onload = function () {
oldOnLoad();
myFunction();
}
}
}
myLoadEvent(function(){
alert('window loaded');
});
Firstly, we assign every previous function bound to onload, to a variable, which we called oldOnLoad. Then, if there are no previous functions hooked to it, we bind our function, else we create an onload event, where the previous function is called first, and then the function we want to add. We call it like usually.
The onload event and jQuery
While the onload event is a standard event in the DOM and built-in Javascript, there are also two other ways to do this, which are specific to jQuery. Those would be $(window).load and $(document).ready.
$(window).load
The $(window).load event is used when we want the whole window to be loaded, including images. It is a jQuery specific event that will only execute after all the DOM elements are loaded. The code would go like this:
$(window).load(function() {
//the code to be executed after loading the window complete with images
});
$(document).ready
Also $(document).ready is a jQuery specific method, but the difference with $(window).load is that this one executes when the DOM elements except images are loaded. It can be called in four ways, and the code would go like below:
//method 1 1
$(document).ready(function() {
//code to be executed
});
//method 2
$(function() {
//code to be executed
});
//method 3
$(document).on('ready', function(){
//code to be executed
});
//method 4
jQuery(document).ready(function(){
//code to be executed
});
Whichever method you choose to use, you will have the same result.
Download the source code
This was an example of on page load in Javascript.
Download the source code for this tutorial:
You can download the full source code of this example here : PageOnLoad
