With the onload event we can execute actions just when all the page elements have finished loading.

Javascript’s onload event is fired when the page is finished loading. When we need to do things by the time the page has finished loading, we can attach an onload event handler to the tag.

In current versions of Javascript the onload event is also accepted by other page elements, such as images. As you can imagine, if we associate an event handler to the onload of an image, it will be executed when the image has finished loading.

onload event to detect when the page has finished loading

With the onload event we can execute actions just when all the page elements have finished loading. It is a widely used event because it is very common to want to carry out actions at that precise moment. In our example we are going to see how we could make a script to motivate our visitors to vote for us in any ranking of web pages.

The idea is that the entire page loads and, once it is loaded, a Javascript window appears where the visitor is asked to vote for the page. It is interesting to wait for the entire page to finish loading so that the visitor can see the website that they intend to vote on, before we actually ask for their vote.

The code would be the following:

SuperChula page

This page is very nice. I am its author and I can assure you that there are not many pages with such quality on the Internet

Enter

We notice that in the tag we have defined an event handler in onload=”pedirVoto()”. In other words, when the page is loaded, a function called requestVote() will be called, which we have defined in the script block that we have in the header.

The requestVote() function uses a confirm box to know if the user really wants to vote for us. The confirm() function shows a box with a text and two buttons, to accept or cancel. The text is what is received by parameter. Depending on what is clicked on the buttons, the confirm() function will return true, if the accept button was clicked, or false, if cancel was clicked.

The confirm() function is itself wrapped inside an if conditional block, so that depending on what was clicked in the confirm box, the if will evaluate to positive or negative. In this case, actions are only performed if accept is clicked.

To access the page where our vote is counted, we have the window.open() method, which is used to open secondary windows or popups. We show the page where you vote in a secondary window so that the visitor does not leave our website, since they have just entered and we do not want them to leave now.

This more or less illustrates how to make use of the onload event. Surely in your creations there will be many more cases where you can use it.

Defining event handlers using Javascript

Nowadays it is more common for us to associate event handlers directly with Javascript code, without using HTML attributes like “onload”. It is a good practice to do it from Javascript because this way we avoid mixing programming code within the HTML code, which will positively impact the maintainability of the page.

We can indicate the “load” event handler on the window object, so that the code we need is executed when the page loads. We will do it this way:

window.addEventListener(‘load’, function() { console.log(‘The page has finished loading!!’); });

We could place this code anywhere on the page, or in an external .js file that is loaded using the