Question

我正在Angular 2中制作太空/重力游戏 - 目前希望在主菜单组件加载之前有一个闪屏。

我认为最简单的方法是简单地使用pre-bootstrapped index.html内容，如下：

<body>
    <!-- 
        //This is where our bootstrapped content will go. 
        //Because everything will be removed from the DOM after bootstrap,
        //we can consider this pre-bootstrapped index.html as a psuedo "splash screen"
        //(anim credit @ http://codepen.io/katehummer/pen/zrygBM)
    -->
    <!--<app-mainmenu>-->
    <svg class="solar-system">
        <circle id="sun" cx="100" cy="100" r="10" stroke="none" fill="#FFE581" />
        <circle id="mercury" cx="100" cy="100" r="3" fill="#fff" stroke="none" />
        <circle id="venus" cx="100" cy="100" r="4" fill="#fff" stroke="none" />
        <circle id="earth" cx="100" cy="100" r="5" fill="#fff" stroke="none" />
        <circle id="mars" cx="100" cy="100" r="5" fill="#fff" stroke="none" />
        <circle id="mercury-orbit" cx="100" cy="100" r="35" fill="none" stroke="rgba(255,255,255,0.2)" stroke-width="0.5" />
        <circle id="venus-orbit" cx="100" cy="100" r="55" fill="none" stroke="rgba(255,255,255,0.2)" stroke-width="0.5" />
        <circle id="earth-orbit" cx="100" cy="100" r="75" fill="none" stroke="rgba(255,255,255,0.2)" stroke-width="0.5" />
        <circle id="mars-orbit" cx="100" cy="100" r="95" fill="none" stroke="rgba(255,255,255,0.2)" stroke-width="0.5" />
    </svg>


    <!-- 
        //WAIT 10 SECONDS MINIMUM - OR WAIT UNTIL USER LOADS IF AFTER 10 SEC
    -->
    <!--</app-mainmenu>-->
</body>

虽然注释了<app-mainmenu>，但我可以成功测试我的动画。它看起来就像评论中引用的一样。

下一步是告诉Angular在引导之前等待10秒。我在底部尝试了JS的延迟，但由于它没有阻止，它没有用。

<script>
    setInterval(tryFinishLoading, 10000);

    function tryFinishLoading() {
        alert("loaded");
    }
</script>

任何人都可以告诉我如何等待以下内容：

1）用户加载，如果＆lt; 10，转到（2）

2）等到10，如果没有加载，则循环直到加载。

干杯！

Answer 1

这应该可以解决问题。

<body>
  <app-mainmenu id="main" style="display:none"></app-mainmenu>
  <svg id="anim">Your Animation</svg>

  <script>
    var anim = document.getElementById('anim');
    var main = document.getElementById('main');
    setTimeout(function() {
      anim.style.display = 'none';
      main.style.display = 'block';
    }, 10000);
  </script>
</body>

在引导程序之前等待n秒，Angular 2

1 个答案: