Onload event in Javascript

Onload Event in Javascript

Hello guys! Welcome to our series on Javascript. In the last lesson, we learnt about double click events and how to apply a double click event on an element. We saw three programs using HTML and Javascript where you connect ondblclick with the element, or you could also do it by adding an addEventListener on the element. I hope you’ve practised them on your own.

Today, we’ll move forward with events and talk about Onload Event in Javascript.

What is an Onload Event ?

An onload event is basically the event that fires up when you load a webpage in your browser. Let’s understand what we have in the paragraph here.

In first paragraph , it is written that,

“In javascript, this event can apply to launch a particular function when the page is fully displayed”

So firstly, what will happen is that whatever html we have coded is related to a website, all the coding and elements will be placed in their places.

After the page is completely loaded… our event will be fired. So note that, when an onload event will be fired ? 

If we have kept buttons and other things in the html page, then it will be placed on their respective places, An Onload event will occur only after everything is loaded.

But it still depends on when you fire it, on which tag you’ve written the event. With today’s practice, we will understand exactly how it works.

So, what is written here ?

“It can also be used to verify the type and version of the visitor's browser.”

 Meaning, when you work with a website or make a webpage, sometimes there is a possibility that before you make the page, or before it loads, you need data about the browser the current website is on. We had learnt the Navigator object of Javascript. It provides us with browser related and sometimes system related information. We find all of these things with the help of Onload events. We get them by other functions like document dot write, but usually when we talk about browsers, suppose our webpage contains browser dependent things where we have to show or not to show elements based on our browser, we collect these details before the page loads. In this case, which method will be used ? or which event will be used ? the Onload event will be used.

with the help of an on load event, we can also check cookies. we can check that cookies are being used or not.

(03/24)

we will move to next point,

“In HTML, the onload attribute fires when an object has been loaded.”

If I have written the event in the body, the onload event will load when the body loads. If I have written it in the body within an object, for example, consider a ‘p’ tag at the end of the body within which I have written the onload event. The event will be fired up after the ‘p’ tag loads. So the firing of the event depends on the loading of the respective… element…

(3 seconds pause)

“The purpose of this attribute is to execute a script when the associated element loads.”

 As I had said, the event fires with the loading of the respective element.

“The Onload attribute is generally used with the body element to execute a script once the content.

What is the content ? It includes CSS files, images, scripts, etc of the web page is completely loaded.”

99% of the time in Javascript, the onload event is written within the body because whatever needs to be placed and loaded in a web browser is always written in the body. Whatever we write in the head tag does not show up in the browser, so writing an onload in a head tag is almost useless.

That's why, generally we write on load events in body tags.

clear guys !

now back to the slide.

“It is not necessary to use it only with body tag as it can be used with other HTML elements.”

That is why the onload is generally written within the body, but there is no compulsion, if you wish then you can even write it in head or in title.

Now on onload, you can consider some important notes.

00:05:20

The difference between the document dot onload and Window dot onload

Which means document as well as window provide us with Onload.

Mostly,we use window dot onload. when our window has been loaded.

“Document dot onload triggers before loading of images and other external contents. It is fired before the window Onload.”

Which means, if i have used both Document dot onload as well as window dot onload then my document dot onload will be fired before the window dot onload.

“While the window dot on load triggers when the entire page loads.”

So, we can see the whole difference between the two.

Which event fires when .. okay.

 If we want to fire the event before the webpage loads, then we can use document dot onload. If you want to fire the event after the page loads, use window dot onload. For example, if you want to show an alert before the webpage loads, I will use document dot onload and if I want to show it after the webpage loads, I will use window dot onload. We can check this practically.

Here we have a basic syntax.

window dot onload and our function, which we want to use.

We have a simple example here that we will perform.

What is this example actually ?

In this example we have a division, named “BG” and we have set its details like background color,height and width. These things happen during the loading of the webpage, during the loading time means, we have used window.onload.

So after the page loads, we can see the styling that I have written. If I had written it using document dot onload, it would have been visible before that.

clear so far !

Firstly we will open Sublime Text.(3 seconds pause ; mouse clicking ) in the sublime text, (5 seconds pause ;typing) We will set it to HTML and

example onload…

Save it…. on load. (3 seconds pause ;typing)

 Here, I will take an h1 tag (4 seconds pause ;typing). This is the header. and runs the program. (3 seconds pause )

 I have my program and my header.

Now let’s say we add both document dot onload and window dot onload in our script and check the difference between both.

so,

Document dot onload. in this, I will write,

This is…(3 seconds pause ;typing) document dot (8 seconds pause ;typing) Onload method

and here we will take window dot onload…

Save...

Now, when we reload it, it will show something.

(4 seconds pause ;typing)

Also add “ equal to alert”, here also we add “ equal to alert” save and reload.

As you can see, the moment I reload my “Document dot OnLoad Method” shows up …ok, after that my “Window dot OnLoad Method” is shown. ok..

The theory basically says that our document dot onload will load first after which our content will be loaded and then the window dot onload will be executed. But practically, this is not what has happened.

Both our methods loaded first and only after that the content loaded.

We can see a difference in our theory and practical. Let’s try to transfer our window.onload somewhere else in the body or head.

00:09:42

Let’s say, we transfer the window.onload method, somewhere else.

Transfer it to the body. in our body,

body onload equal to …alert this is body tag …(13 seconds pause ;typing)

 When you reload it, you can see both our methods, window dot onload and document dot onload shown again and then we can see the text ``this is header” , but the alert we have written in the body cannot be seen.

We surely have a reason for it since the console is also not showing any error. It means the onload within the body is not getting executed. So, here I will take out the alert… and make a method named onLoad. (7 seconds pause ;typing)

function..(6 seconds pause typing) on load..

In that, we have placed an alert.

we will Save it , we will reload it.

This is an onload document, this is an onload window, and our header is shown.

We see that the onload we have written in the body is not getting executed. The function I have written is not getting executed. The most probable reason for this is that we have already used two onload methods here. If I change them to comments and execute it again, we can see that my method does get executed. So, what does this indicate ? This indicates that while loading we have two options, either we can use document dot onload method or window dot onload method. But even if you explicitly use the window method, this onload method, this is related to the document, If we apply this method, then the browser has two options. It can execute one of the two. either it executes this one, or the document related. Since document dot onload gets more priority, it will be executed first. I will now uncomment it and remove the following portion for now. So here we have our program for onload.

I hope you have understood so far. 

00:12:38

Back in the slide in the example we have generated an event, but basically as we saw with our alert example we’ve seen how the onload event works. But let’s see what to do if we wish to generate an image or a graphic when our screen loads. Then, how we can do this, let’s say I remove this portion. We can write this (9 seconds pause ; typing) “there is a division below” here, in this portion, we will write, let’s say I Take out the document dot onload portion…. and now with the window dot onload we can add our function’s name and call it or we can move forward by simply writing….function. Let’s say I take a div id here,( 7 seconds pause ;typing) “background” ..(7 seconds pause ;typing) get element by ID ..background, in that we can take var x equal to..so this is the context. and for styling. let’s say I take  x dot style dot background equal to.. this is our color cyan

x…dot..style..dot..width equal to..(4 seconds pause ;typing) 200px (5 seconds pause ;typing)

here height .

we will save it.

we will Save with the name of onload underscore div.

(5 seconds pause ; typing)

This is our program.

We will reload the program and as you can see when reloading, output is so quick that when you reload you cannot notice that element comes after the division. Here for example if we add the following document….dot…onload… alert…hello… so it executes early, we will see the alert getting executed and then the text and the coloured box. So the text is generated with the document but the box comes after window loads, but from the browser’s perspective, the speed is so quick that you don’t notice the difference in loading times. So we can’t see the difference. You will see them both generated at the same time. means when the header loads, at that time we can see a div generated. But in the program you can see how we have generated this div ?

we have generated this division that is styled with the help of onload. This was our example.

clear guys !

00:15:40

Next, in this example, it shows what we learnt about the onload method, that it can be used anywhere. Here we have made a function and written it in the body onload. Let’s say… we copy the previous program

 onload in… element

I will Remove the document dot onload as of now. We saw previously that when I placed the onload in the body I can only place it at any one place. That is if I use window dot onload here, I cannot use it in the body. So if I want to pass it here as an element, I will have to make a function and then write within that function whatever it is that I want to get it done. (pause.. 11 secs ;typing)

Now I have my alert method within the function. Now I will Save it with the name of..(4 seconds pause ;typing) onload underscore element and reload. My method shows up before the body tag generates.

Let’s say I keep the onload within the head for trial purposes. Save and reload.

As you can see my method does not get called. This indicates that we cannot keep this in the head; it has to be kept in the body only.

We will not keep them in the head or related places but in the elements within the body. If we add it to h1…. and reload it, it will not be executed.

So like we saw in the slide, it is mostly used in the body tags. As you can see, an error is not generated but the function is also not executed. This indicates that our onload method is basically built for the body. So use it in the body whenever you are working with it, it is more preferable and will get executed.

So that was our on load method.

In today’s segment we saw firstly, two onload methods and when they are executed. The document dot onload is executed first and then the second. Secondly, we have generated a div using the window dot onload method. Thirdly, we learnt that the onload method is applied in the body and not anywhere else. Even if you do, it is not executed.

So this was today’s segment. It is a small segment but it is very important from an interview perspective.

You may be asked about them in difficult interviews and so I hope today’s lesson will help you clear your interviews as well.

If you have any queries or comments, click the discussion button below the video and post there. This way, you will be able to connect to fellow learners and discuss the course. Also, Our Team will try to solve your query.

Our next segment is also very important. We will continue with events and talk about Onresize event in Javascript.

See you in the next segment. Thank you!

(edited script)