How to make Unity WebGL app placed on simple html page load asynchronously?

Question

I created a game in Unity and regularly exported it for WebGL. The index.html page that comes with this export contains these parts of code:

script definition

<script src="Build/UnityLoader.js"></script>
<script> 
  var gameInstance = UnityLoader.instantiate("gameContainer", "Build/1.0.json");
</script>

and using of that script

<div class="gameContainer">
    <div id="gameContainer" style="width: 960px; height: 600px; margin: auto"/>
</div>

inside of plain html code.

Now I realized, that when I put more content on that page, everything freeze until the game is loaded. What is the adequate solution for that? Is there a simple way, how to make this game load async?

Thanks a lot for any answers!

Answer 1

Instead of loading it within your HTML, load it inside a javascript file (there are a few ways to do this asynchronously in javascript that I can google later and edit with references if needed). That way your HTML and CSS will load, you can have some sort of default loading image/gif, and your separate javascript file can display your game when it's ready.