SVG 旋转加载图标在加载数据时冻结答案

【问题标题】：SVG spin loading icon freezes while loading dataSVG 旋转加载图标在加载数据时冻结
【发布时间】：2018-05-23 21:26:42
【问题描述】：

这个问题与SO post 非常相似，但我使用的是在一个单独的文件中定义的 svg 动画微调器，其中存储了我所有的 svg 图标。当我使用$("#spinner").show() 显示它时，微调器工作正常。但是，当我在加载数据（大量数据）期间尝试显示微调器时，它会冻结。它在加载结束时重新启动，但我的代码应在之后隐藏它。如果加载微调器不旋转，则有点违背了显示加载微调器的目的。

我在下面创建了一个带有超时的演示来模拟数据处理。如果你的机器更强大，你可以调整超时时间和记录数。

我知道在提到的 SO 帖子中有一个 css 替代方案，但我想尝试保留一个 svg 实现。

感谢任何输入。谢谢！

var records = [];

function LoadData() {
  for (var i = 0; i < 100000; i++) {
    setTimeout(records.push("Record" + i), 100000);
  }

  $("button").html("Done");
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- SEPARATE SVG DEF FILE -->
<div>
  <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" style="width:0;height:0;position:absolute;overflow:hidden;">
    <defs>
    <symbol id="icon-loading" viewBox="0 0 40 40" enable-background="new 0 0 40 40" xml:space="preserve">
      <path opacity="0.2" fill="#0353A4" d="M20.201,5.169c-8.254,0-14.946,6.692-14.946,14.946c0,8.255,6.692,14.946,14.946,14.946 s14.946-6.691,14.946-14.946C35.146,11.861,28.455,5.169,20.201,5.169z M20.201,31.749c-6.425,0-11.634-5.208-11.634-11.634 c0-6.425,5.209-11.634,11.634-11.634c6.425,0,11.633,5.209,11.633,11.634C31.834,26.541,26.626,31.749,20.201,31.749z"/>
      <path fill="#0353A4" d="M26.013,10.047l1.654-2.866c-2.198-1.272-4.743-2.012-7.466-2.012h0v3.312h0 C22.32,8.481,24.301,9.057,26.013,10.047z">
        <animateTransform attributeType="xml" attributeName="transform" type="rotate" from="0 20 20" to="360 20 20" dur="0.5s" repeatCount="indefinite"/>
      </path>
    </symbol>
    </defs>
  </svg>
</div>

<!-- VIEW PAGE -->
<div>
  <svg><use xlink:href="#icon-loading"></use></svg>
</div>
<button onclick="LoadData();">Load Data</button>

【问题讨论】：

似乎帧被冻结，等待数据加载。您应该考虑使用异步方式来加载数据以防止实际滞后，具体取决于加载的数据。
对不起，这不是很清楚，也没有帮助回答。我倾向于使用 fps 脚本，返回当前时间。当运行较长的循环时，您可以返回日期，如果超过一定数量，则暂时停止功能超时并让帧通过，然后在下一帧继续循环。

标签： javascript html svg

【解决方案1】：

如果你使用 Css 动画，它对我来说没有问题。

我唯一注意到的是：圆圈有点偏离中心。您可以使用 css 转换原点或修复 svg 来解决此问题。

var records = [];

function LoadData() {
  for (var i = 0; i < 100000; i++) {
    setTimeout(records.push("Record" + i), 100000);
  }

  $("button").html("Done");
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<style>
    @keyframes rotate {
        from {
            transform: rotateZ(0deg)
        }

        to {
            transform: rotateZ(360deg)
        }
    }

    #loading {
        animation: rotate .5s infinite linear;
    }
</style>
<!-- SEPARATE SVG DEF FILE -->
<div>
  <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" style="width:0;height:0;position:absolute;overflow:hidden;">
    <defs>
    <symbol id="icon-loading" viewBox="0 0 40 40" enable-background="new 0 0 40 40" xml:space="preserve">
      <path opacity="0.2" fill="#0353A4" d="M20.201,5.169c-8.254,0-14.946,6.692-14.946,14.946c0,8.255,6.692,14.946,14.946,14.946 s14.946-6.691,14.946-14.946C35.146,11.861,28.455,5.169,20.201,5.169z M20.201,31.749c-6.425,0-11.634-5.208-11.634-11.634 c0-6.425,5.209-11.634,11.634-11.634c6.425,0,11.633,5.209,11.633,11.634C31.834,26.541,26.626,31.749,20.201,31.749z"/>
      <path fill="#0353A4" d="M26.013,10.047l1.654-2.866c-2.198-1.272-4.743-2.012-7.466-2.012h0v3.312h0 C22.32,8.481,24.301,9.057,26.013,10.047z">
      </path>
    </symbol>
    </defs>
  </svg>
</div>

<!-- VIEW PAGE -->
<div>
    <svg id="loading"><use xlink:href="#icon-loading"></use></svg>
</div>
<button onclick="LoadData();">Load Data</button>

【讨论】：