时间戳

首页 > 解决方案 > 如何使用 JavaScript 在画布元素上添加加载器？

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

问题描述

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

画布的 HTML 代码：

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

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

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

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

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

加载画布代码：

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

标签： javascripthtmlreactjscanvas

解决方案

您可以在函数开始时使用 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();

推荐阅读