Javascript 如何使用p5.js sketch作为网站的加载程序？_Javascript_Html_P5.js

Javascript 如何使用p5.js sketch作为网站的加载程序？

javascript html

Javascript 如何使用p5.js sketch作为网站的加载程序？,javascript,html,p5.js,Javascript,Html,P5.js,我已经创建了一个p5.js草图，并试图在我的网站上作为加载器实现它…问题是，我必须在HTML的主体部分加载p5.js草图，因为加载页面后，如果我把它放在头部，草图仍然可见 <body onload="myLoader()" style="margin:0;"> <div id="loader"> <script src="sketch-loader.js"></scri

我已经创建了一个p5.js草图，并试图在我的网站上作为加载器实现它…问题是，我必须在HTML的主体部分加载p5.js草图，因为加载页面后，如果我把它放在头部，草图仍然可见

<body onload="myLoader()" style="margin:0;">

<div id="loader">
  <script src="sketch-loader.js"></script>
</div>

<div style="display:none;" id="myDiv" class="animate-bottom">
  //content of my website
</div>

<script>
var myVar;

function myLoader() {
  myVar = setTimeout(showPage, 3000);
}

function showPage() {
  document.getElementById("loader").style.display = "none";
  document.getElementById("myDiv").style.display = "block";
}
</script>

</body>


//我的网站内容
var-myVar；
函数myLoader（）{
myVar=setTimeout（showPage，3000）；
}
函数showPage（）{
document.getElementById（“加载器”）.style.display=“无”；
document.getElementById（“myDiv”）.style.display=“block”；
}

谢谢你的帮助

继续回答

实际上，您并没有将p5js画布附加到“loader”div。有几种方法可以解决这个问题，一种是使用（另请参见：），另一种是通过使用，它使用一个参数指定画布的父元素

然而，值得注意的另一件事是，仅仅隐藏div可能仍然会让p5js草图运行并消耗资源。您最好同时调用以完全停止绘制

下面是一个工作示例：


#加载屏幕{
位置：固定；
左：0；
右：0；
排名：0；
底部：0；
}
body.loaded#loading_屏幕{
显示：无；
}
这里还没什么可看的
功能加载屏幕（p）{
p、 设置=函数（）{
p、 createCanvas（p.windowWidth，p.windowHeight）；
}
p、 draw=函数（）{
p、 背景（200,200,200,20）；
p、 圈(
p、 宽度/2+p.cos（p.millis（）/400）*100，
p、 高度/2+p.sin（p.millis（）/400）*100，
100
);
}
}
让草图=新p5（加载屏幕，“加载屏幕”）；
document.addEventListener（'apploated'，（）=>{
//将加载屏幕移开
sketch.remove（）；//这将删除画布
document.body.classList.add（'loaded'）；//这将停止显示div
});
设置超时(
() => {
让root=document.getElementById（'root'）；
root.innerHTML='万岁，我们的应用程序已加载！'；
document.dispatchEvent（新的CustomEvent（'Apploated'））；
},
5000//模拟应用程序，加载时间为5秒
);