SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Wizard
    Join Date
    Feb 2007
    Location
    Southern California
    Posts
    1,316
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    What if two scripts need to start on body load?

    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. #2
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,526
    Mentioned
    83 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by StevenHu View Post
    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?
    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 Code:
    <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.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  3. #3
    SitePoint Wizard
    Join Date
    Feb 2007
    Location
    Southern California
    Posts
    1,316
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    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. #4
    SitePoint Wizard
    Join Date
    Dec 2003
    Location
    USA
    Posts
    2,582
    Mentioned
    29 Post(s)
    Tagged
    0 Thread(s)
    Actually, I question that a bit.

    I just wrote a test:
    Code:
    <!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:
    Code:
    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. #5
    SitePoint Wizard
    Join Date
    Feb 2007
    Location
    Southern California
    Posts
    1,316
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    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. #6
    SitePoint Wizard
    Join Date
    Dec 2003
    Location
    USA
    Posts
    2,582
    Mentioned
    29 Post(s)
    Tagged
    0 Thread(s)
    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:
    Code:
    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.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •