Question

我正在尝试使用微风加载记录。在加载记录时我正在显示旋转图标。但不知何故，旋转图标似乎在网格中加载记录时停止。这是我的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");

UPDATE1 我根据答案尝试了下面的代码，但没有任何反应。我还包括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; }

使用静态图标，图像或精灵，只需对其应用“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而不是图标

上次编辑

现在你的问题是你的逻辑有问题。我试着在评论中解释这一点，但我会给出最后一次更新，如果你想展示你的微调器并让它旋转，你的逻辑应该如何。

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);">  <i class="fa fa-2x fa-spinner fa-spin"></i> </div>

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

Answer 2

您还可以对图形进行Base64编码并通过CSS应用此加载图形，从而使后续使用更快并保存HTTP请求。执行Base64编码动画加载程序的结果是，对于像加载或处理资产这样的小型常见可重用资产，它已经可用并且会在执行大量AJAX / HTTP请求时继续动画，这就是您要在此处尝试解决的问题

另见：

这样，您可以在加载CSS时加载图形。因为Base64编码的图像并不是最可维护的解决方案，所以您可以使用SASS / Compass等技术并使用资源路径，然后在预处理或编译为css时使用资源或资源的路径并编码它为您提供Base64编码版本。这种技术适用于各种图像格式等。

Sass / Compass Base64参考文献：

“将图像内容直接嵌入样式表中，消除了对另一个HTTP请求的需要。对于小图片，这个以更大的生成CSS为代价可以获得性能优势文件“

但要注意！ Base64编码并非没有一些警告

难以维护和更新：没有一些工具可以帮助，手动编辑和拼凑图像精灵是一件很麻烦的事情
增加内存消耗（可能非常戏剧性）：这通常是忽视。传送图像的时间减少了耗费更大的内存和CPU占用空间，特别是对于大型内存有很多空格的精灵和精灵。
渗透：对于没有太多空格分开的精灵图像，附近图像明显出血的可能性增加通过其他元素，如在这种情况下只有渗透在iOS上看到（但桌面上的Chrome和Safari看起来很好）。注意

示例Base64 Loading Spinner：

.genericLoader { background-image: url('data:image/gif;base64,R0lGODlhEAAQAPIAAP///wAAAMLCwkJCQgAAAGJiYoKCgpKSkiH/C05FVFNDQVBFMi4wAwEAAAAh/hpDcmVhdGVkIHdpdGggYWpheGxvYWQuaW5mbwAh+QQJCgAAACwAAAAAEAAQAAADMwi63P4wyklrE2MIOggZnAdOmGYJRbExwroUmcG2LmDEwnHQLVsYOd2mBzkYDAdKa+dIAAAh+QQJCgAAACwAAAAAEAAQAAADNAi63P5OjCEgG4QMu7DmikRxQlFUYDEZIGBMRVsaqHwctXXf7WEYB4Ag1xjihkMZsiUkKhIAIfkECQoAAAAsAAAAABAAEAAAAzYIujIjK8pByJDMlFYvBoVjHA70GU7xSUJhmKtwHPAKzLO9HMaoKwJZ7Rf8AYPDDzKpZBqfvwQAIfkECQoAAAAsAAAAABAAEAAAAzMIumIlK8oyhpHsnFZfhYumCYUhDAQxRIdhHBGqRoKw0R8DYlJd8z0fMDgsGo/IpHI5TAAAIfkECQoAAAAsAAAAABAAEAAAAzIIunInK0rnZBTwGPNMgQwmdsNgXGJUlIWEuR5oWUIpz8pAEAMe6TwfwyYsGo/IpFKSAAAh+QQJCgAAACwAAAAAEAAQAAADMwi6IMKQORfjdOe82p4wGccc4CEuQradylesojEMBgsUc2G7sDX3lQGBMLAJibufbSlKAAAh+QQJCgAAACwAAAAAEAAQAAADMgi63P7wCRHZnFVdmgHu2nFwlWCI3WGc3TSWhUFGxTAUkGCbtgENBMJAEJsxgMLWzpEAACH5BAkKAAAALAAAAAAQABAAAAMyCLrc/jDKSatlQtScKdceCAjDII7HcQ4EMTCpyrCuUBjCYRgHVtqlAiB1YhiCnlsRkAAAOwAAAAAAAAAAAA==');   
}

工作示例：

http://jsbin.com/muyacodu/1/edit?html,css,output

何时Base64编码图像（以及何时不编码） - http://davidbcalhoun.com/2011/when-to-base64-encode-images-and-when-not-to/

编码工具

其他StackOverflow参考：

Answer 3

这只是猜测，但我认为您的记录加载脚本是通过在主线程中运行来阻止Web浏览器。这不是一个理想的行为，但幸运的是，这正是 webworkers 的目的。首先，我建议你阅读this page以获得一些背景，然后阅读。

基本上，您需要先将加载代码移动到单独的javascript文件中。这个单独的文件应该包含加载记录的所有代码，然后将它放在一个对象中并将对象发布回主线程，如下所示。然后，您可以使用以下命令从主线程调用此代码：

var myWorker = new Worker("my_loading_code.js");

现在，由于线程安全问题，webworker可以直接访问的内容受到限制，因此您可能需要检索记录，然后使用postMessage(x);调用将其发送到主线程，这样您就可以发送任何内容对象回到主页面。然后，主页面可以通过安装消息处理程序来响应此消息：

myWorker.onmessage = function(record){
    // This is only pseudo code, use your actual code here
    reactToRecievingRecord(record);
};

这意味着在加载所有记录时不会阻止主线程，并且可以为您的图标设置动画，仅在收到记录时短暂阻止。

如果这还不够清楚，或者您需要更多帮助，请问：）

编辑：

要详细说明，在您的情况下，在单独的文件中，您将需要一些代码来执行以下操作：

context.getData(name, records).then(function (data) {
    postMessage(data);
})

然后在你想要的主文件中：

isSpinning(true);
var myWorker = new Worker("my_loading_code.js");
myWorker.onmessage = function(record){
    // This is only pseudo code, use your actual code here
    isLoading(false);
    isSpinning(false);
};

注意，这个代码在收到数据后实际上并没有对数据做任何事情，你会想要处理它，但我相信你会得到粗略的想法。请注意，这些也只是片段，您需要将它们转换为完整的功能等

旋转图标在加载记录时冻结

3 个答案:

上次编辑