2

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

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

非常感谢你们！

4

5 回答 5

4

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

[看到它在行动]

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();
于 2010-07-10T11:59:58.413 回答
2

从非常页面：

  • 没有图像，没有外部 CSS
  • 无依赖项（支持 jQuery，但不是必需的）
  • 高度可配置
  • 独立于分辨率
  • 在旧 IE 中使用 VML 作为后备
  • 使用@keyframe 动画，回退到 setTimeout()
  • 适用于所有主流浏览器，包括 IE6
  • 麻省理工学院许可证

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

于 2012-03-29T06:58:49.113 回答
1

也许是这样的：

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

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

于 2010-07-10T11:51:02.233 回答
1

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

于 2010-07-10T11:57:40.320 回答
1

演示

var str = '|/—\\';    
var target = $('#target');
var x = 0;
setInterval(function(){
    target.text(str.charAt((x++)%str.length))
},5000)
于 2010-07-10T12:02:02.727 回答