How can I add a loading effect before all assets are loaded?

Question

I need to display a loading effect before all assets (image or video) are loaded in a frame. Anyone can help on this? I need JavaScript code in details if possible.

Answer 1

See the asset management system: https://aframe.io/docs/0.3.0/core/asset-management-system.html

With that, you have a way to determine when all your resources have been fetched. <a-assets> will emit a loaded event, which you can wait on and show something in the meantime.

<a-scene>
  <a-assets timeout="10000">
    <img id="waitingonme">
  </a-assets>
</a-scene>

document.querySelector('a-assets').addEventListener('loaded', function () {
  console.log("OK LOADED");
});