动态加载 p5.js 脚本
Dynamically Load p5.js Script
我正在尝试动态加载 p5.js 脚本(浏览器处理),但是,无论我做什么,我都无法让脚本在网页中显示其视觉效果。在正常情况下,我会使用标准加载 index.html 中的 p5 脚本
<script src="sketch.js" type="text/javascript"></script>
。但是,当我尝试使用 jquery 脚本动态附加脚本时,Chrome 抛出 "Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user's experience"。我也试过使用
$('body').load("aSeparateFileWithTheScriptInIt.html", function() {
console.log("load html was performed");
$.getScript("sketch.js", function(data, textStatus, jqxhr) {
console.log("load sketch was performed");
});
});
displays/prints 什么都没有。
St运行gely,这段代码returns表示脚本运行成功。
$.getScript( "sketch.js" )
.done(function( script, textStatus ) {
console.log( textStatus );
})
.fail(function( jqxhr, settings, exception ) {
$( "div.log" ).text( "Triggered ajaxError handler." );
});
我需要帮助来弄清楚我应该如何正确使用 jquery 来动态加载 sketch.js 文件。
不完全是你想要的,但我想原因是一样的。
我通过将 async="true"
的新脚本添加到 header.
在运行时加载 p5js
在我的例子中,我没有看到 p5.js 应该有的任何全局函数(特别是 loadImage
、createCanvas
)。
虽然我能够看到 p5 object。
所以在我的情况下,我不得不手动调用 new p5();
来解决问题。
就是这样,一切都在那里!
希望它能为某人节省几个小时 :)
编辑 2019 年 5 月 14 日
我最终完全摆脱了 p5
库,并自己重写了我需要的方法。
主要是因为p5
页面上只允许一个canvas,而且很慢与直接使用 canvas
和 canvas context
.
相比
如果您必须异步加载您的草图(在 P5.js 加载并查找现有草图后很久才开始),您必须添加以下行才能在“全局模式”
window.setup = setup;
window.draw = draw;
new p5();
window
是P5填充其所有功能的全局变量,以提供“全局模式”环境。
setup
和 draw
是那些用户定义的函数,P5 将调用以 运行 您的草图。它们必须是全局可用的 before new p5()
is 运行 - 要么是因为它们已被定义为如此,要么是因为您明确地将它们设为全局(如我的示例所示) .
后者允许您在本地环境(例如 IIFE)中定义这两个函数以及您需要的任何其他方法(并且您不想用它们污染全局名称空间)并且仍然摆脱所有 P5 方法和属性前面的令人讨厌的目标对象前缀(例如 p5.xxx
)。
这个“解决方案”更像是一个“hack”而不是一个真正的“答案”(因为它没有记录并且利用了将来可能会改变的行为)但它帮助我将外部脚本加载到一个已经加载的网络中运行ning P5 without 不必告诉那些草图它们将在“本地模式”下执行(因为草图永远不需要知道它的模式运行 在)
我正在尝试动态加载 p5.js 脚本(浏览器处理),但是,无论我做什么,我都无法让脚本在网页中显示其视觉效果。在正常情况下,我会使用标准加载 index.html 中的 p5 脚本
<script src="sketch.js" type="text/javascript"></script>
。但是,当我尝试使用 jquery 脚本动态附加脚本时,Chrome 抛出 "Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user's experience"。我也试过使用
$('body').load("aSeparateFileWithTheScriptInIt.html", function() {
console.log("load html was performed");
$.getScript("sketch.js", function(data, textStatus, jqxhr) {
console.log("load sketch was performed");
});
});
displays/prints 什么都没有。
St运行gely,这段代码returns表示脚本运行成功。
$.getScript( "sketch.js" )
.done(function( script, textStatus ) {
console.log( textStatus );
})
.fail(function( jqxhr, settings, exception ) {
$( "div.log" ).text( "Triggered ajaxError handler." );
});
我需要帮助来弄清楚我应该如何正确使用 jquery 来动态加载 sketch.js 文件。
不完全是你想要的,但我想原因是一样的。
我通过将 async="true"
的新脚本添加到 header.
在我的例子中,我没有看到 p5.js 应该有的任何全局函数(特别是 loadImage
、createCanvas
)。
虽然我能够看到 p5 object。
所以在我的情况下,我不得不手动调用 new p5();
来解决问题。
就是这样,一切都在那里!
希望它能为某人节省几个小时 :)
编辑 2019 年 5 月 14 日
我最终完全摆脱了 p5
库,并自己重写了我需要的方法。
主要是因为p5
页面上只允许一个canvas,而且很慢与直接使用 canvas
和 canvas context
.
如果您必须异步加载您的草图(在 P5.js 加载并查找现有草图后很久才开始),您必须添加以下行才能在“全局模式”
window.setup = setup;
window.draw = draw;
new p5();
window
是P5填充其所有功能的全局变量,以提供“全局模式”环境。
setup
和 draw
是那些用户定义的函数,P5 将调用以 运行 您的草图。它们必须是全局可用的 before new p5()
is 运行 - 要么是因为它们已被定义为如此,要么是因为您明确地将它们设为全局(如我的示例所示) .
后者允许您在本地环境(例如 IIFE)中定义这两个函数以及您需要的任何其他方法(并且您不想用它们污染全局名称空间)并且仍然摆脱所有 P5 方法和属性前面的令人讨厌的目标对象前缀(例如 p5.xxx
)。
这个“解决方案”更像是一个“hack”而不是一个真正的“答案”(因为它没有记录并且利用了将来可能会改变的行为)但它帮助我将外部脚本加载到一个已经加载的网络中运行ning P5 without 不必告诉那些草图它们将在“本地模式”下执行(因为草图永远不需要知道它的模式运行 在)