本文介绍了加载记录时旋转图标会冻结的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我试图用微风载入记录。加载记录时,我显示旋转图标。但不知何故旋转图标似乎停止,而记录被加载到网格中。
这是我的html

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

这里是我加载图片的代码



<$ ($)$ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ b setTimeout(function(){
isSpinning(false);
},300);

})
.fail(Record not found);

Update1
我按照答案尝试了下面的代码,发生。我还包括CSS。但无法看到任何内容。

 < div id =loadingdata-bind =visible:isSpinningstyle =padding :10px; position:absolute; top:240px; left:280px; background-color:#FFF; opacity:0.9; filter:alpha(opacity = 90);> 
< i class =icon-spinstyle =width:40px>< / i>
< / div>


解决方案

这是因为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:旋转2s无限线性;
-o-animation:旋转2s无限线性;
-webkit-animation:旋转2s无限线性;
动画:旋转2s无限线性; }

使用静态图标,图像或sprite并仅应用'icon-spin'无论它是否是图标。

编辑



无论你在哪里声明你的CSS,都可以添加 -

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

更改 -

 < div id =showSpindata-bind =visible:isSpinningstyle =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 =showSpindata-bind =visible:isSpinningstyle =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而不是图标



Last Edit



现在你的问题是你的逻辑有问题。我试图在评论中解释这一点,但我会给出最后一次更新,确切地说,如果你想显示你的微调并让它旋转,你的逻辑应该看起来如何。



<$ p $ (数据){
isLoading(false);

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

})
.fail(Record not found);


< i class =fa fa-2x fa-spinner fa-spin>< / i>
< / div>

这不起作用的原因在于您的逻辑。将其完全复制到您的解决方案中即可使用。


I am trying to load records using breeze. While loading record i am showing spin icon. But somehow spin icon seems to stop while records are being loaded in grid.Here is my 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>

here is my code to load image

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

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

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

Update1I tried below code as per answer but nothing happens. I also included css. But cant see anything.

<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>
解决方案

This is happening because a Gif requires the thread to be open to display the next image. If you were using a pure css approach you would not see this issue. Take font-awesome for example -

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

Because this is a pure CSS approach the spinner will continue to spin even when the thread bogs down loading all of of your new records and associating their related entities.

If you need to continue spinning I would highly including this bit of CSS from the Font-Awesome source -

@-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; }

And using either a static icon, image or sprite and just applying class of 'icon-spin' to it, regardless of whether it is an icon or not.

Edit

Add this wherever you are declaring your CSS -

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

Change this -

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

to this -

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

The reason it is fa instead of icon is the current version of FontAwesome changed to use fa instead of icon due to collisions

Last Edit

Your problem now is that your logic is faulty. I have tried to explain this in comments but I will give one last update with EXACTLY how your logic should look if you want to show your spinner and have it spinning.

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>

The reason this wasn't working is in your logic. Copy this EXACTLY to your solution and it will work.

这篇关于加载记录时旋转图标会冻结的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!

08-20 09:26
查看更多