动态加载p5.js脚本

时间:2016-08-14 02:49:45

标签: javascript jquery html processing p5.js

我正在尝试动态加载p5.js脚本(处理浏览器),但是,无论我做什么,我都无法让脚本在网页中显示其视觉效果。在正常情况下,我使用标准在index.html中加载p5脚本 <script src="sketch.js" type="text/javascript"></script>。但是,当我尝试使用jquery脚本动态附加脚本时,Chrome会抛弃主线程上的同步XMLHttpRequest,因为它对最终用户的体验产生了不利影响。我也尝试过使用

$('body').load("aSeparateFileWithTheScriptInIt.html", function() {
    console.log("load html was performed");
    $.getScript("sketch.js", function(data, textStatus, jqxhr) {
      console.log("load sketch was performed");
    });
  });

显示/打印绝对没有。

奇怪的是,此代码返回脚本成功运行。

$.getScript( "sketch.js" )
  .done(function( script, textStatus ) {
    console.log( textStatus );
  })
  .fail(function( jqxhr, settings, exception ) {
    $( "div.log" ).text( "Triggered ajaxError handler." );
});

我可以帮忙搞清楚如何正确使用jquery来动态加载sketch.js文件。

2 个答案:

答案 0 :(得分:0)

不完全是您想要的,但是我想原因是相同的。 我通过在标头中添加带有async="true"的新脚本来在运行时加载p5js。

在我的情况下,我没有看到p5.js应该存在的任何全局函数(特别是loadImagecreateCanvas)。

尽管我能够看到p5对象。

因此,以我为例,我不得不手动致电 new p5(); 来解决问题。

就是这样,一切都在那里!

希望它将为某人节省几个小时:)

编辑14/05/2019

我最终完全摆脱了p5库,并重写了自己需要的方法。

主要是因为p5在页面上仅允许一个画布,并且与直接使用canvas和{ {1}}。

答案 1 :(得分:0)

如果您必须异步加载您的草图(在 P5.js 加载并查找现有草图后很长时间内启动),您必须添加以下几行以便在“全局模式”下启动草图

window.setup = setup;
window.draw  = draw;
new p5();

window 是全局变量,P5 用它的所有函数填充它以提供“全局模式”环境。

setupdraw 是那些用户定义的函数,P5 将调用以运行您的草图。在运行 new p5() 之前,它们必须全局可用 - 要么是因为它们已被定义为这样,要么是因为您明确地将它们设为全局可用(如我的示例所示)。

后者允许您在本地环境(例如 IIFE)中定义这两个函数以及您需要的任何其他方法(并且您不想污染全局命名空间)并且仍然摆脱讨厌的目标所有 P5 方法和属性前面的对象前缀(例如 p5.xxx)。

这个“解决方案”更像是一个“黑客”而不是一个真正的“答案”(因为它没有记录并且利用了未来可能会改变的行为)但它帮助我将外部脚本加载到一个已经加载的正在运行的网页中P5 不必告诉那些草图它们将在“本地模式”下执行(因为草图永远不需要知道它将运行的模式)