How to run processing.js using jQuery's getScript

Question

I have made a processing sketch which I want to include on my blog.

The recommended way like so works fine:

<script src="js/libs/processingjs.js"></script>

I only want to load processingjs if there is an sketch on the page, I wanted to achieve this using jQuery's getScript. However when I run this code:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script>
    $(function() {
        $.getScript('js/libs/processingjs.js');
    });
</script>

The processing sketch will not get rendered. There should be no callback necessary since processing would run on its own. My web inspector shows that the file has been loaded, but I don't see the sketch.

Answer 1

Flöcsy's suggestion does not work for me. It appears that whenever I ajax the script I need to specify the script to load the sketches (instead of the script just searching for them). This is the code I am using now:

//processing
if($('.sketch').length) {
    $.getScript("processingjs.js", function() {
        $('.sketch').each(function() {
            Processing.loadSketchFromSources(this, [$(this).data('processing-sources')]);
        });
    });
}

Answer 2

Is it possible that processing.js is built in a way that it can't be loaded after document.ready? (just an example of such a bad practise would be to use document.write) so it works when it's included in the html, but not if it's loaded later? What happens if you add the script tag yourself:

var script = document.createElement("script");
script.src = "/js/libs/processingjs.js";
var head = document.getElementsByTagName("head")[0];
head.appendChild(script);