这个问题与SO post非常相似,但是我使用svg动画微调器定义在一个单独的文件中,其中存储了我的所有svg图标。使用$("#spinner").show()
显示时,微调器工作正常。但是,当我尝试在加载数据(大量数据)期间显示微调器时,它会冻结。它会在加载结束时重新启动,但我的代码会在它应该之后隐藏它。如果它没有旋转,Kinda就会失去显示加载微调器的目的。
我在下面创建了一个演示模拟数据处理的时间。如果您的机器功能更强大,您可以调整超时时间和记录数。
我知道在提到的SO帖子中有一个css替代方案,但我想尝试保留一个svg实现。
任何输入都表示赞赏。谢谢!
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;
答案 0 :(得分:0)
如果您使用Css动画,它对我来说没有问题。
我注意到的唯一一件事:圆圈有点偏离中心。您可以使用css transform origin修复此问题或修复svg。
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;