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を含むすべての主要なブラウザで動作します
  • MITライセンス

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-'hidden' 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 に答える