How do I delay/defer/control when an A-Frame scene

Question

I want to have an A-Frame scene start loading only when I tell it to. Currently if I put <a-scene> in an HTML file, it will start initializing immediately.

<a-scene></a-scene>

Answer 1

An A-Frame scene waits for all of its children to initialize before it itself initializes. So it waits for every <a-entity> from the bottom up. Under the hood, <a-entity> is based on <a-node> which handles load order. When <a-node> emits loaded, then the parent nodes can begin loading. <a-entity> emits loaded when it attaches + initializes all of its components.

Therefore, you start a scene on demand:

<a-scene>
  <a-node id="waitOnMe"></a-node>
</a-scene>

document.getElementById('waitOnMe').emit('loaded');  // When you are ready.