SVG旋转加载图标在加载数据时冻结 [英] SVG spin loading icon freezes while loading data

问题描述

这个问题与 SO帖子非常相似，但我使用在单独文件中定义的svg动画微调器，该文件中存储了我所有的svg图标.当我使用$("#spinner").show()显示它时，微调器可以正常工作.但是，当我尝试在加载数据(大量数据)时显示微调框时，它冻结了.它会在加载结束时重新启动，但我的代码会按原样将其隐藏. Kinda破坏了显示不旋转的加载微调器的目的.

This question is quite similar to this SO post but I'm using an svg animated spinner defined in a separate file where all my svg icons are stored. The spinner works fine when I display it by using $("#spinner").show(). However, when I try to display the spinner during loading of data (lots of data), it freezes. It restarts towards the end of loading but my code hides it after as it should. Kinda defeats the purpose of showing the loading spinner if it doesn't spin.

我在下面创建了一个带有超时的演示，以模拟数据处理.如果您的计算机功能更强大，则可以调整超时时间和记录数.

I created a demo below with a time out to simulate data processing. You can adjust the timeout time and the number of records if your machine is more powerful.

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

I know there's a css alternative in the mentioned SO post but I would like to try keeping an svg implementation.

任何输入表示赞赏.谢谢！

Any input is appreciated. Thanks!

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>

推荐答案

如果您使用Css动画进行插入，则对我来说毫无问题.

If you use Css animations insted it works without a problem for me.

我唯一注意到的是:圆圈有点偏离中心.您可以使用css transform原点修复此问题，也可以修复svg.

The only thing that I noticed: the circle is a bit off center. You can fix this with css transform origin or fix the 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>

这篇关于SVG旋转加载图标在加载数据时冻结的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！