What if two scripts need to start on body load?

JavaScript
1

What if I have body onload=“thisScript.js” but another script also needs to run on body load? How do I make that work? Do I sandwich both humongous scripts into one script and put that script name in the onload call?

2

You don’t use the onload event.

Instead, it’s better to move the scripts to the end of the body, just before the </body> tag.


<html>
<head>
</head>
<body>
  ...
  <script src="thisScript.js"></script>
  <script src="thatScript.js"></script>
  <script type="text/javascript">
  initThisScript();
  initThatScript();
  </script>
</body>
</html>

A useful benefit of doing things that way is that they get run before the onload event occurs too.

3

That’s interesting. So the scripts in the <head> are not executed until after the page loads, meaning that after the page loads, then the browser reads the <head> scripts a second time? That’s always been unclear to me.

I can understand scripts at the end of the <body> loading after the page loads, but not after the onload. Can you explain this?

4

Actually, I question that a bit.

I just wrote a test:


<!DOCTYPE html>
<html>
<head>
<title>JS Execution Order Test</title>
<script type="text/javascript">
	console.log("Header Script");
	
	function onbody() {
		console.log("Body OnLoad");
	}
</script>
</head>
<body onload="onbody()">
<script type="text/javascript">console.log("Start of Body")</script>
<p>Text</p>
<script type="text/javascript">console.log("End of Body")</script>
</body>
</html>

And it printed out:


Header Script
Start of Body
End of Body
Body OnLoad

So, from this simple test it looks like the head scripts are run as they are interpreted (which is why it would be a problem to do a DOM operation from there).

The head is run first, but since you don’t have your DOM loaded yet, you can’t do much at this point. Having your scripts at the bottom will launch before body.onload, but since we’re at the bottom, your DOM should be all set to start messing with.

Another advantage of scripts at the bottom is the JS won’t “block” the other stuff on the page from loading. (When your browser downloads JS files, it stops downloading all other types of files).

5

Very illuminating, samanime!

Right now all my scripts in the <head> don’t really do anything (they are lists of functions waiting to be called) until a button is pressed, then they are executed. (That’s not entirely true; some are listening for keystrokes, then act, such as a textbox character counter.)

onBody seems to be different in that when the body is finished loading, then it functions like a button-press calling a function at that point. Am I correct in this assessment?

If so, then how is a function called when placed at the end of a body while body onload is already used to call another function? (It’s possible the question is silly, since I’m not understanding the concept well enough.) Specifically, my functions in the <head> are being called to save and load to and from the localStorage database by Save and Load buttons. But I need a script to execute each time a page loads to do other background database work.

6

You are correct about the onload. That’s an “event”.

When code is in the body itself (or head for that matter). It is processed and does what asked. When you right a function, you are just asking it to make that function. If you want that called as well, you can do something like:


function afunc() {
  console.log("Hi");
}

afunc(); // calls the function

You can split up and have the function in the head and just have the function call in the body if you want (or better yet, have it all in a separate file and just have the <script src= in the body.