Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New Coder
    Join Date
    Mar 2009
    Posts
    74
    Thanks
    3
    Thanked 3 Times in 3 Posts

    onload event order with multiple .js files

    Our page has several external .js files, and each one has an addEventListener/attachEvent part like this:

    file1.js
    Code:
    if(window.attachEvent)
    {
         //ie
         window.attachEvent('onload', function(){file1_function})
    }
    else if(window.addEventListener)
    {
         //w3c
         window.addEventListener('load', function(){file1_function}, false)
    }
    file2.js
    Code:
    if(window.attachEvent)
    {
         //ie
         window.attachEvent('onload', function(){file2_function})
    }
    else if(window.addEventListener)
    {
         //w3c
         window.addEventListener('load', function(){file2_function}, false)
    }
    etc.

    Is there a way to have the file1_function and file2_function run in a certain order? Is it determined by the order the .js files are listed in the html? Example:

    Code:
    <html>
    <head>
         <script type="text/javascript" src="/file1.js"></script>
         <script type="text/javascript" src="/file2.js"></script>
    </head>
    <body>
         blah
    </body>
    </html>
    would file1_function.js run first and then file2_function.js?

    Thanks.

  • #2
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,893
    Thanks
    202
    Thanked 2,528 Times in 2,506 Posts
    If you aren't dynamically loading scripts or marking them as defer or async, then scripts are loaded in the order encountered in the page. It doesn't matter whether it's an external script or an inline script - they are executed in the order they are encountered in the page. Inline scripts that come after external scripts have loaded are held until all external scripts that came before them have loaded and run.

    But you could also call function2 from function1.

    I suggest you load your scripts immediately ahead of the </body> tag.


    Code:
    <html>
    <head>
    </head>
    <body>
     blah
    <script type="text/javascript" src="/file1.js"></script>
    <script type="text/javascript" src="/file2.js"></script>
    </body>
    </html>
    All advice is supplied packaged by intellectual weight, and not by volume. Contents may settle slightly in transit.

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.

  • Users who have thanked Philip M for this post:

    Raphael (03-01-2013)

  • #3
    New Coder
    Join Date
    Mar 2009
    Posts
    74
    Thanks
    3
    Thanked 3 Times in 3 Posts
    Awesome, thank you.

  • #4
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,589
    Thanks
    0
    Thanked 644 Times in 634 Posts
    Why are you forcing IE9 to use the older attachEvent rather than the far superior addEventListener?

    You only need attachEvent for IE8 as all other browsers now support addEventListener so you are testing backwards.
    Stephen
    Learn Modern JavaScript - http://javascriptexample.net/
    Helping others to solve their computer problem at http://www.felgall.com/

    Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.


  •  

    Posting Permissions

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