Question

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

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

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

任何输入都表示赞赏。谢谢！

＆＃13;

var records = [];

function LoadData() {
  for (var i = 0; i < 100000; i++) {
    setTimeout(records.push("Record" + i), 100000);
  }

  $("button").html("Done");
}

＆＃13;

<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>

＆＃13;

Answer 1

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

我注意到的唯一一件事：圆圈有点偏离中心。您可以使用css transform origin修复此问题或修复svg。

＆＃13;

    Mat getCorners(const Mat &image) {
    Mat result;

    dilate(image, result, cross);
    erode(result, result, diamond);
    Mat result2;

    dilate(image, result2, x);
    erode(result2, result2, square);
    absdiff(result2, result, result);

    applyThreshold(result);
    return result; // result == binaray
}

＆＃13;

var records = [];

function LoadData() {
  for (var i = 0; i < 100000; i++) {
    setTimeout(records.push("Record" + i), 100000);
  }

  $("button").html("Done");
}

＆＃13;

加载数据时，SVG旋转加载图标冻结

1 个答案: