javascript - 在用户单击时使用 ajax 加载 processing.js 草图

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 上的数据处理源属性。如果你想在那之后加载一个 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);
});