title: Deferring dynamically added Javascript
body: <p>I need to load some Javascript dynamically after the page has loaded.</p>
  
  <p>Something like this:</p>
  
  <ul>
  <li><p>page loads</p></li>
  <li><p>page adds script element with <code>src = "file1.js"</code></p></li>
  <li><p>page adds script element with <code>src = "file2.js"</code></p></li>
  </ul>
  
  <p><code>file2.js</code> has a dependency on <code>file1.js</code> - it adds properties to an object defined in <code>file1.js</code></p>
  
  <p>The problem is that <code>file2.js</code> is loading first (because it is smaller), and is immediately throwing an error because its dependency doesn't exist.</p>
  
  <p>Is there a way for me to defer evaluation/execution of these new scripts until they have all loaded. (There is actually more than two scripts)</p>
  
  <p>If I were to just embed these scripts in a page normally in authored HTML, then it seems that the browser loads all scripts, then evaluates them. But it is behaving differently because I'm adding script elements on the fly.</p>
  
  <p>Thanks</p>