如何使用 JavaScript 在画布元素上添加加载器？答案

【问题标题】：How to add loader over canvas element using JavaScript?如何使用 JavaScript 在画布元素上添加加载器？
【发布时间】：2021-06-26 09:22:02
【问题描述】：

我有一个加载巴比伦模型的画布元素。我在向画布元素添加加载器时遇到了问题。

画布的 HTML 代码：

<canvas id='canvas' width={120} height={120} ></canvas>

此画布元素位于<div> 内。我想添加一个加载器而不是画布，直到画布完全加载，加载完成后在画布中显示模型并停止加载器。

使用 Babylon 在画布中显示模型的代码已经完成，剩下的就是在画布上添加加载器。

另外，我必须在不更改 HTML 代码或向 div 中添加 id 的情况下执行此操作。

我无法显示整个代码，但这是脚本的前 2 行，它开始在画布中加载模型。

加载画布代码：

var canvas = document.getElementById('canvas');
var engine = new BABYLON.Engine(canvas, true);
........

【问题讨论】：

标签： javascript html reactjs canvas

【解决方案1】：

您可以在函数开始时使用 javascript createElement 创建加载器，然后在函数结束时显示：none div。

例如，您可以这样做：

var ctx = document.createElement('div');
var ctxPar = document.createElement('div');
ctxPar.setAttribute('id', 'parentModelLoaderdiv');
ctx.setAttribute('id', 'modelLoader');
ctxPar.append(ctx);
canvas.after(ctxPar);
console.log(ctx);
document.getElementById(option).style.display = 'none';
document.getElementById('modelLoader').style.display = 'block';

现在，当画布准备好显示时，函数结束时：

document.getElementById(canvasClass).style.display = 'inline-block';
document.getElementById('parentModelLoaderdiv').remove();

【讨论】：