When is a javascript code executed?

Question

Suppose I have this code :

 <head>
    <script type="text/javascript">
    func1();
    </script>

    <script type="text/javascript" src="jquery.js"></script>

    <script type="text/javascript">
    func2();
    </script>

    <script type="text/javascript" src="tabber.js"></script>
 </head>

Would func2() be called only after jquery.js is completely loaded? Basically I am trying to make a progress bar in a page with some heavy javascript code. So I want to know how much of the page has loaded.Now I can show this progress in the form of the number of js files that have been completely downloaded. So if func2() is called only after jquery completely loads, I can use that function to slide up the progress bar by some percentage.

You can't have Javascript code directly in <head>... fix your example. — MattJ
– MattJ, Commented Dec 28, 2010 at 19:28
You could use something like this: dynamicdrive.com/dynamicindex11/xpprogressbar.htm — RDL
– RDL, Commented Dec 28, 2010 at 19:32
Also, it's better not to load JQuery locally, but obtain it from a 3rd party source (e.g. using Google Libraries API code.google.com/apis/libraries/devguide.html ). — nico
– nico, Commented Dec 28, 2010 at 19:38
Its just an example, people. I used jquery.js just to mean any js file. I just wanted to know what will be the sequence of execution ? — johngreen
– johngreen, Commented Dec 28, 2010 at 19:44
@RDL : This one is just an animation . I want to show the amount of page data that has been loaded. Like the one we get before going into our gmail inbox. (Hope you've used gmail) — johngreen
– johngreen, Commented Dec 28, 2010 at 19:47

RDL · Accepted Answer · 2010-12-28 19:40:45Z

2

JavaScripts in a page will be executed immediately while the page loads into the browser. The exception is when it's told to fire on an event (ie: click, after page load, etc)

If you want to ensure code is run only after the page is loaded you can use:

<head>
<script type="text/javascript" 
  src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js">
</script>
<script>
  $(document).ready(function(){
    [code to run once page loaded here]
  }
</script>
</head>

Note: put your Javascript in tags as well.

edited Dec 28, 2010 at 19:40

answered Dec 28, 2010 at 19:30

RDL

8,0013 gold badges32 silver badges32 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Powerlord Over a year ago

Aren't you forgetting something? Like loading jQuery before attempting to use it for its ready function?

RDL Over a year ago

indeed. nice catch. jQuery load added

zsalzbank · Accepted Answer · 2010-12-28 19:35:58Z

2

None of those would ever be called because they are not in <script> tags.

What you probably want is to load all your scripts that are needed, and then use the window.onload or jQuery's ready event to trigger the functions you want to call.

<head>
    <script type="text/javascript" src="jquery.js"></script>
    <script type="text/javascript" src="tabber.js"></script>
    <script type="text/javascript">
        $(document).ready(function() {
            func1();
            func2();
        });
    </script>
</head>

edited Dec 28, 2010 at 19:35

answered Dec 28, 2010 at 19:28

zsalzbank

9,8611 gold badge28 silver badges39 bronze badges

1 Comment

R. Martinho Fernandes Over a year ago

Oops, I guess we had a race condition back there. I downvoted while in my screen there were no script tags, but apparently you had already edited the answer... Now I can't undo the downvote. :(

Collectives™ on Stack Overflow

When is a javascript code executed?

2 Answers 2

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related