load processing.jsユーザーのクリックでajaxを使用したスケッチ

Question

クリックするとajaxでprocessing.jsスケッチを読み込もうとしていますが、動作しません。スケッチを即座に読み込むのではなく、ユーザーとのやりとりで読み込んでも機能します。私のコードは次のとおりです：

$('#clicker').click(function(){ 
    var canvasRef = $('<canvas/>'); 
    canvasRef.attr('data-src','/uploads/processing_js/anything_1.pde'); 
    $('#loader').append(canvasRef); 
}); 

私はまた、属性に対して 'data-processing-sources'と 'datasrc'を試しました。

これはなぜ機能しないのですか？

Answer 1

DOMContentLoadedのdata-processing-sources属性のみをチェックします。あなたはその後の処理スケッチをロードする場合、あなたはProcessing.jsはスケッチをロードするために内部的に使用するものである、Processing.loadSketchFromSourcesを使用することができます。

$('#clicker').click(function(){ 
    var canvasRef = document.createElement('canvas'); 
    var p = Processing.loadSketchFromSources(canvasRef, ['/uploads/processing_js/anything_1.pde']); 
    $('#loader').append(canvasRef); 
});