Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>After my studing around this toppics, I updated for who visit to this question later.</p> <p>For most of the browsers (IE9, Firefox, Chrome, Safari, ...) except Opera (12.16), dynamic script injection into DOM will load script asynchronously.</p> <p>So this code:</p> <pre><code>function loadScript(src) { var script = document.createElement('script'); script.type = 'text/javascript'; script.src = src; } loadScript('script1.js'); loadScript('script2.js'); loadScript('script3.js'); </code></pre> <p>is almost equivalent to:</p> <pre><code>&lt;script src="script1.js" async&gt;&lt;/script&gt; &lt;script src="script2.js" async&gt;&lt;/script&gt; &lt;script src="script3.js" async&gt;&lt;/script&gt; </code></pre> <p>But if the <code>async</code> flag is set to <code>false</code> explicitly like:</p> <pre><code>function loadScript(src) { var script = document.createElement('script'); script.type = 'text/javascript'; script.src = src; script.async = false; } </code></pre> <p>then the scripts will be loaded in order synchronously.</p> <p>So the very short answer for this question is that <code>g.async = false</code>, but still I also recommend to use some framework and that is the best answer.</p> <p>Try this: <a href="http://jsfiddle.net/DRCzN/" rel="nofollow">http://jsfiddle.net/DRCzN/</a></p> <p>~~~~ original answer ~~~~~~</p> <p>Dynamic script insertion (<code>createElement('script')</code> then <code>insertBefore()</code> or even <code>insertAfter()</code>) will load each script asynchronously.</p> <p>So with your current script, the arrival of those script to the browser heavily depends on the network status.</p> <p>If you want keep the dependency of these scripts, you can use some script loader such as <a href="https://github.com/ded/script.js/" rel="nofollow">$script</a>, head.js or Require.js.</p> <p>EDIT: I like Jonathan's solution, and here is a little improvement using <code>$.getScript()</code>.</p> <h3>if script.js and form.js are independent of each other</h3> <pre><code>&lt;script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"&gt;&lt;/script&gt; &lt;script type="text/javascript"&gt; (function(scripts) { var protocol = ('https:' == document.location.protocol ? 'https://ssl.' : 'http://www.'); $.each(scripts, function(i, s) { $.getScript(protocol + s); }); })(['.example.com/js/script.js', '.example.com/js/form.js']); &lt;/script&gt; </code></pre> <h3>if form.js depneds on script.js</h3> <pre><code>&lt;script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"&gt;&lt;/script&gt; &lt;script type="text/javascript"&gt; (function(scripts) { var protocol = ('https:' == document.location.protocol ? 'https://ssl.' : 'http://www.'); $.getScript(protocol + scripts[0], function() { $.getScript(protocol + scripts[1]); }); })(['.example.com/js/script.js', '.example.com/js/form.js']); &lt;/script&gt; </code></pre>
    singulars
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. VO
      singulars
      1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload