Search code examples
jqueryprocessingprocessing.jsgetscript

How to run processing.js using jQuery's getScript


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.


Solution

  • 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')]);
            });
        });
    }