[英]Dynamically Load p5.js Script
我正在尝试动态加载 p5.js 脚本(浏览器的处理),但是,无论我似乎做什么,我都无法让脚本在网页中显示其视觉效果。 在正常情况下,我会使用标准的<script src="sketch.js" type="text/javascript"></script>
在 index.html 中加载 p5 脚本。 然而,当我尝试使用 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 文件。
不完全是你想要的,但我想原因是一样的。 我通过向标头添加带有async="true"
新脚本在运行时加载 p5js。
就我而言,我没有看到任何应该与 p5.js 一起存在的全局函数(特别是loadImage
、 createCanvas
)。
虽然我能够看到 p5 对象。
所以就我而言,我不得不手动调用new p5();
来解决问题。
就是这样,一切都在那里!
希望它能为某人节省几个小时:)
编辑 14/05/2019
我最终完全摆脱了p5
库,并自己重写了我需要的方法。
主要是因为p5
只允许页面上有一个画布,并且与直接使用canvas
和canvas context
相比它非常慢。
如果您必须异步加载您的草图(在 P5.js 加载并查找现有草图后很长一段时间内启动),您必须添加以下几行以便在“全局模式”下启动草图
window.setup = setup;
window.draw = draw;
new p5();
window
是全局变量,P5 用它的所有函数填充它以提供“全局模式”环境。
setup
和draw
是那些用户定义的函数,P5 将调用以运行您的草图。 在运行new p5()
之前,它们必须是全局可用的 - 要么是因为它们已被定义为这样,要么是因为您明确地将它们设为全局(如我的示例所示)。
后者允许您在本地环境(例如 IIFE)中定义这两个函数以及您需要的任何其他方法(并且您不想污染全局命名空间),并且仍然摆脱讨厌的目标对象前缀(例如p5.xxx
) 在所有 P5 方法和属性之前。
这个“解决方案”更像是一个“黑客”而不是一个真正的“答案”(因为它是未记录的并且利用了将来可能会改变的行为)但它帮助我将外部脚本加载到运行 P5 的已经加载的网页中,而无需告诉那些草图它们将在“本地模式”下执行(因为草图永远不需要知道它将运行的模式)
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.