title: Conditional javascript loading
body: <p>For my backend I want to automatically load javascript files when it detects certain elements. Here is an example:</p>
  
  <pre><code>if($('.wysiwyg').length&gt;0) {
       include('javascript/ckeditor/ckeditor.js');
       $(".wysiwyg").ckeditor();
  }
  </code></pre>
  
  <p>But when I execute the code I get <code>$(".wysiwyg").ckeditor is not a function</code> because it seems the browser is still loading or parsing the javascript file that was included on the line before. If I put an alert popup right before the function it does work because it "pauzes" the script I guess and gives it time to load the file.</p>
  
  <p>Is there a way I can know when the file is actually loaded so that the followed code can be executed?</p>
  
  <p><strong>EDIT</strong>:
  Seems that I asked this question a bit too soon. I found out the <code>e.onload</code> property for a callback function that solved this problem. This is my function now if others might stumble upon the same problem:</p>
  
  <pre><code>function include(script, callback) {
      var e = document.createElement('script');
      e.onload = callback;
      e.src = script;
      e.type = "text/javascript";
      document.getElementsByTagName("head")[0].appendChild(e);
  }
  
  
  if($('.wysiwyg').length&gt;0) {
      include('javascript/ckeditor/ckeditor.js', function() {
          $(".wysiwyg").ckeditor();
      });
  }
  </code></pre>