用户点击加载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草图,可以使用Processing.loadSketchFromSources,这是Processing.js在内部用于加载草图的内容:

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