javascript - 加载记录时旋转图标卡住

Question

我正在尝试使用 breeze 加载记录。加载记录时，我正在显示旋转图标。但是不知何故，当记录被加载到网格中时，旋转图标似乎停止了。这是我的 html

<div id="showSpin" data-bind="visible: isSpinning" style="padding: 10px; position: absolute; top:248px;left: 320px;  background-color: #FFF; opacity: 0.9; filter: alpha(opacity=90);">
    <img src="/images/spin.gif" />
</div>

这是我加载图片的代码

isSpinning(true)
context.getData(name, records).then(function (data) {
     isSpinning(false);

    setTimeout(function () {
        isSpinning(false);
    }, 300);

})
.fail("Record not found");

更新1我根据答案尝试了以下代码，但没有任何反应。我还包括了 css。但是什么也看不到。

<div id="loading" data-bind="visible: isSpinning" style="padding: 10px; position: absolute; top:240px;left: 280px;  background-color: #FFF; opacity: 0.9; filter: alpha(opacity=90);">
    <i class="icon-spin " style="width: 40px"></i>
    <!--<img src="../../../../../Content/images/download.jpg" style="width: 40px" />-->
</div> 

Answer 1

发生这种情况是因为 Gif 需要打开线程才能显示下一张图像。如果您使用的是纯 css 方法，则不会看到此问题。以 font-awesome 为例 -

<i class="icon-spin icon-spinner"></i>

因为这是一种纯 CSS 方法，即使线程在加载所有新记录和关联它们的相关实体时陷入困境，微调器也会继续旋转。

如果您需要继续旋转，我会高度包括来自 Font-Awesome 源的这段 CSS -

@-moz-keyframes spin {
  0% {
    -moz-transform: rotate(0deg); }

  100% {
    -moz-transform: rotate(359deg); } }

@-webkit-keyframes spin {
  0% {
    -webkit-transform: rotate(0deg); }

  100% {
    -webkit-transform: rotate(359deg); } }

@-o-keyframes spin {
  0% {
    -o-transform: rotate(0deg); }

  100% {
    -o-transform: rotate(359deg); } }

@-ms-keyframes spin {
  0% {
    -ms-transform: rotate(0deg); }

  100% {
    -ms-transform: rotate(359deg); } }

@keyframes spin {
  0% {
    transform: rotate(0deg); }

  100% {
    transform: rotate(359deg); } }

.icon-spin {
  display: inline-block;
  -moz-animation: spin 2s infinite linear;
  -o-animation: spin 2s infinite linear;
  -webkit-animation: spin 2s infinite linear;
  animation: spin 2s infinite linear; }

并使用静态图标、图像或 sprite，并对其应用“icon-spin”类，无论它是否为图标。

编辑

在声明 CSS 的任何地方添加它 -

<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">

改变这个-

<div id="showSpin" data-bind="visible: isSpinning" style="padding: 10px; position: absolute; top:248px;left: 320px;  background-color: #FFF; opacity: 0.9; filter: alpha(opacity=90);">
    <img src="/images/spin.gif" />
</div>

为此-

<div id="showSpin" data-bind="visible: isSpinning" style="padding: 10px; position: absolute; top:248px;left: 320px;  background-color: #FFF; opacity: 0.9; filter: alpha(opacity=90);">
    <i class="fa fa-spinner fa-spin"></i>
</div>

它是 fa 而不是 icon 的原因是由于冲突，FontAwesome 的当前版本更改为使用 fa 而不是 icon

最后编辑

你现在的问题是你的逻辑有问题。我已尝试在评论中对此进行解释，但我将给出最后一次更新，具体说明如果您想显示微调器并让它旋转，您的逻辑应该是什么样子。

isSpinning(true)
context.getData(name, records).then(function (data) {
    isLoading(false);

    setTimeout(function () {
        isSpinning(false);
    }, 1000);

})
.fail("Record not found");


<div id="showSpin" data-bind="visible: isSpinning" style="padding: 10px; position: absolute; top:248px;left: 320px;  background-color: #FFF; opacity: 0.9; filter: alpha(opacity=90);">
    <!-- THERE IS NO REASON TO USE A VISIBLE BINDING HERE AND ON THE PARENT -->
    <i class="fa fa-2x fa-spinner fa-spin"></i>
</div>

这不起作用的原因是您的逻辑。将此完全复制到您的解决方案中，它将起作用。