title: Dynamically Load p5.js Script
body: <p>I am trying to dynamically load a p5.js script (Processing for the browser), but, no matter what I seem to do, I can't get the script to display its visuals in a webpage. Under normal circumstances, I'd load the p5 script in the index.html, using the standard 
  <code>&lt;script src="sketch.js" type="text/javascript"&gt;&lt;/script&gt;</code>. When I attempt using a jquery script to dynamically append the script, however, Chrome throws "Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user's experience". I've also tried using </p>
  
  <pre><code>$('body').load("aSeparateFileWithTheScriptInIt.html", function() {
      console.log("load html was performed");
      $.getScript("sketch.js", function(data, textStatus, jqxhr) {
        console.log("load sketch was performed");
      });
    });
  </code></pre>
  
  <p>which displays/prints absolutely nothing.</p>
  
  <hr>
  
  <p>Strangely, this code returns that the script ran successfully.</p>
  
  <pre><code>$.getScript( "sketch.js" )
    .done(function( script, textStatus ) {
      console.log( textStatus );
    })
    .fail(function( jqxhr, settings, exception ) {
      $( "div.log" ).text( "Triggered ajaxError handler." );
  });
  </code></pre>
  
  <p>I could use help figuring out how I should properly use jquery to dynamically load the sketch.js file.</p>