【问题标题】：Entirely Javascript Ajax spinner?完全是 Javascript Ajax 微调器？
【发布时间】：2012-03-29 16:08:26
【问题描述】：

我在想 Ajax 微调器真的很棒，但是图像旋转实际上显示有一些延迟或者加载太早，我想也许我可以使用这些老学校字符来提供更准确的 ajax 活动反馈。
|, /, —, \

假设目标段落称为<p id="target"></p> 我如何在该段落中交换这些字符而不占用太多资源，我已经在项目中加载了 JQuery。

非常感谢大家！

【问题讨论】：

我看到你已经有了答案，但我想我会补充一点，我写了一个可以动画子弹的插件：wowmotty.blogspot.com/2010/06/dynamic-progress-indicator.html

标签： javascript jquery ajax ascii spinner

【解决方案1】：

这允许您同时拥有多个事件加载指示器。只需将它们存储在一个变量中，并在不再需要它们时调用stop()。

[See it in action]

function loader(el, delay) {
  if (typeof el === "string")
    el = document.getElementById(el);
  if (!el) 
    return;
  delay = delay || 100;
  var chars = "|/-\\".split("");
  var i = 0;
  var timer = setInterval(function(){
    el.innerHTML = chars[ i++ % chars.length ];
  }, delay);
  // public method to stop the animation
  this.stop = function() {
    clearInterval(timer);
  }
}


// make a new loader and start animation
var ld1 = new loader("loader"); // or loader($("#loader")[0]); 

// content is loaded stop animation
ld1.stop();

【讨论】：

【解决方案2】：

从一页开始：

没有图片，没有外部 CSS

无依赖项（支持 jQuery，但不是必需的）

高度可配置

独立于分辨率

在旧 IE 中使用 VML 作为后备

使用@keyframe 动画，回退到 setTimeout()

适用于所有主流浏览器，包括 IE6

MIT 许可证

http://fgnass.github.com/spin.js/

【讨论】：

【解决方案3】：

可能是这样的：

function change(areDoneYet) {
    var realFun = (function(doneYet) {
        var chars = "|/-\\";
        var el = $('#target'); // I think that's the JQuery way
        var current = el.innerHTML;
        var changeTo = "";

        if (current == "") changeTo = chars.charAt(0);
        else
            changeTo = chars.charAt(chars.indexOf(current) % chars.length);

        el.innerHTML = changeTo;

        if (!areDoneYet())
            setTimeout(realFun, 100, doneYet);
    });
    realFun(areDoneYet);
    if (!areDoneYet())
       setTimeout(realFun, 100, areDoneYet);
}

嗯。这有点不雅。它需要一个回调来返回它是否应该停止。

【讨论】：

【解决方案4】：

Mohammad - 在“隐藏”的 div 中加载图像可以解决加载图像的延迟问题。但是，我想您的问题更多是对图像替代品的好奇，而不是解决延迟本身..

【讨论】：

true true 哈哈，我昨晚真的想到了隐藏的解决方案，但是今天早上我忘记了。我仍在研究这个选项，因为它可能允许旋转速度和结果之间存在推论。

【解决方案5】：

demo

var str = '|/—\\';    
var target = $('#target');
var x = 0;
setInterval(function(){
    target.text(str.charAt((x++)%str.length))
},5000)

【讨论】：