Question

我有一个加载器动画，我想在等待绘制功能完成时进行显示。但是，当前加载程序未显示，并且SVG立即绘制（在等待几秒钟之后）。如果我是在pageload而不是在keypress上输入的，则加载程序会运行类似的代码。

        .loader {
            position: relative;
            left: calc(50% - 25px);
            top: calc(50% - 25px);
            align-content: center;
            border: 5px solid #f3f3f3;
            /* Light grey */
            border-top: 5px solid #3498db;
            /* Blue */
            border-radius: 50%;
            width: 50px;
            height: 50px;
            -webkit-animation: spin 1s linear infinite;
            /* Safari */
            animation: spin 1s linear infinite;
        }

if (keyPress) {

  $(".loader").show();

  setInterval(function() {
    if ($("#SVG3").length > 0) {
      $(".loader").hide();
    }
  })

  //function to insert SVG3 into graphPanel
  drawSVG3()
}

    <div id="graphPanel">
      <div class="loader" style="display: none;"></div>
    </div>

Answer 1

如果drawSVG3通过通常的DOM API同步创建svg内容，则加载器将永远不会显示，因为在代码运行完毕后将执行下一个绘制。到那时，设置的时间间隔回调将立即执行并再次隐藏加载程序。

您可以使用drawSVG延迟对setTimeout的呼叫，以便在工作开始之前可以进行涂装周期（显示装载机）：

if (keyPress) {
    $(".loader").show();

    setTimeout(function() {
        //function to insert SVG3 into graphPanel
        drawSVG3();
        $(".loader").hide();
    })
}

请注意，虽然绘制SVG内容时加载程序动画将不会运行，因为这又需要进行绘制循环。

Javascript在按键上启动加载程序，并在绘制SVG时停止

1 个答案: