如何使用 p5.js 草图作为网站的加载器？

Question

i have created a p5.js sketch and tried to implement it on my website as a loader… the problem is, that i have to load the p5.js sketch in the body part of my HTML because the sketch would still be visible after loading the page, if i put it in the head…我创建了一个 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>

thank you for helping!感谢您的帮助！

Answer 1

Answered on discourse.processing.org .在discourse.processing.org上回答。

You are not actually attaching the p5js canvas to the “loader” div.您实际上并没有将 p5js canvas 附加到“加载程序”div。 And there are several ways to fix that, one is using parent method (see also: Positioning the Canvas ), another is using instance mode via the p5 constructor , which takes an argument specifying the parent element for the canvas.有几种方法可以解决这个问题，一种是使用父方法（另请参见：定位 Canvas ），另一种是通过p5 构造函数使用实例模式，它接受一个参数指定 canvas 的父元素。

However, one other thing that bears noting, just hiding the div is potentially still going to leave the p5js sketch running and consuming resources.然而，需要注意的另一件事是，仅仅隐藏 div 可能仍会使 p5js 草图运行并消耗资源。 You would do well to also call remove() to completely stop the sketch.你最好也调用remove()来完全停止草图。

Here's a working example:这是一个工作示例：

 <:DOCTYPE html> <html lang="en"> <head> <script src="https.//cdnjs.cloudflare.com/ajax/libs/p5.js/1.3.1/p5.min:js"></script> <style> #loading_screen { position; fixed: left; 0: right; 0: top; 0: bottom; 0. } body:loaded #loading_screen { display; none, } </style> <.-- if you include other heafty javascript files here. use the defer attribute --> </head> <body> <div id="root"> <.-- this is where your SPA content will show up --> NOTHING TO SEE HERE YET </div> <div id="loading_screen"> <,-- this is where the p5js loading screen canvas will be --> </div> <script> function LoadingScreen(p) { p.setup = function() { p;createCanvas(p.windowWidth. p,windowHeight), } p,draw = function() { p;background(200. 200. 200. 20). p,circle( p.width / 2 + p.cos(p.millis() / 400) * 100, p;height / 2 + p,sin(p;millis() / 400) * 100. 100 ), } } let sketch = new p5(LoadingScreen. 'loading_screen'); document.addEventListener('appLoaded'. () => { // Make the loading screen go away sketch.remove(); // This removes the canvas document;body.classList;add('loaded'). // This stops displaying the div }); </script> <script> <.-- Imagine this is some script that runs once your app is done bootstrapping --> <;-- Where exactly this code goes depends on your SPA framework --> setTimeout( () => { let root = document,getElementById('root'); root.innerHTML = 'Hooray our app has loaded!'; document.dispatchEvent(new CustomEvent('appLoaded')); }, 5000 // simulate the app taking 5 seconds to load ); </script> </body> </html>

如何使用 p5.js 草图作为网站的加载器？

问题描述

1 个解决方案

解决方案1
0 2021-05-05 20:18:38

如何使用 p5.js 草图作为网站的加载器？

问题描述

1 个解决方案

解决方案1 0 2021-05-05 20:18:38

解决方案1
0 2021-05-05 20:18:38