Javascript src loading order

Question

I have the following code layout

<script src="http://some.javascript/file.js"></script> // This should load first
<script language="JavaScript">
    document.write('<SCR'+'IPT language="JavaScript1.1" SRC="http://a.link.to.an.external.url/that/returns/a/full/html/page/including/some/javascript">'); // This should load second
    document.write('</SCR'+'IPT>');
</script>

MyJavascriptFunctionThatDependsOnStuffLoadedFromThe.documentWritePage(); <!-- Those files above should have loaded before this call -->

I know that it looks weird. Let's assume that it HAS to look like that for reasons that don't affect how the JS gets loaded. This does not need to work across browsers -- just WebKit browsers.

How do I make sure each of those documents loads completely before the next one? That is, how do I make sure that these documents load synchronously so that the function call at the end can assume appropriate state?

sigh let's just assume that the code needs to look like this. I don't really want to go into it. — boo-urns
– boo-urns, Commented Jul 16, 2012 at 17:50
Why do you want to document.write a script tag that has a source that includes html (and who knows what else) along with the javascript? — mason81
– mason81, Commented Jul 16, 2012 at 17:51

Roman Goyenko · Accepted Answer · 2012-07-16 17:51:58Z

1

JavaScript files should load sequentially and block so unless the scripts you are depending on are doing something unusual all you should need to do is load application.js after the other files.

Cross-domain scripts are loaded after scripts of site itself, this is why you get errors.

You could add event listener and load your js files on this event, something like this:

function addJavaScript( js, onload ) {
   var head, ref;
   head = document.getElementsByTagName('head')[0];
   if (!head) { return; }
   script = document.createElement('script');
   script.type = 'text/javascript';
   script.src = js;
   script.addEventListener( "load", onload, false );
   head.appendChild(script);
}

answered Jul 16, 2012 at 17:51

Roman Goyenko

7,1027 gold badges56 silver badges85 bronze badges

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

1 Comment

Scott Sauyet Over a year ago

How does this solve the synchronization issues Darren was looking to address? This is clearly a better syntax than the document.write version, but I don't see how it addresses the fundamental issue.

Scott Sauyet · Accepted Answer · 2012-07-16 17:56:26Z

0

I don't think you can do so consistently cross-browser.

IE (at least many older versions) will process the script tags in the order they are returned from the server. Many other browsers process them in the order they're defined. Ones that are added dynamically to the DOM like this, who knows? I certainly wouldn't count on being able to control the order of their execution, unless you add some sort of wrappers to test that one is in place before you even attempt to add the next.

IF it simply has to be this way, I really don't know what to suggest. But there are plenty of module loaders if you can switch to use them. You might look especially at AMD

answered Jul 16, 2012 at 17:56

Scott Sauyet

50.9k5 gold badges57 silver badges111 bronze badges

Collectives™ on Stack Overflow

Javascript src loading order

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related