Целиком Javascript Ajax Spinner?

Question

Я думал, что вращатели Ajax действительно хороши, но вращение изображения на самом деле показывается с некоторой задержкой ИЛИ загружается слишком рано, я подумал, что, возможно, я мог бы использовать этих старых школьных персонажей, чтобы обеспечить более точную обратную связь активности Ajax.
|, /, -, \

Допустим, целевой абзац называется <p id="target"></p> Как я могу поменять эти символы в этом абзаце, если он не слишком ресурсоемкий, JQuery уже загружен в проект.

Большое спасибо, ребята!

Answer 1

Это позволяет вам иметь несколько индикаторов загрузки события одновременно.Просто сохраните их в переменной и вызовите 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();

Answer 2

С самой страницы:

• Нет изображений, нет внешнего CSS
• Нет зависимостей (jQuery поддерживается, но не требуется)
• Высоконастраиваемый
• Независимо от разрешения
• Использует VML как запасной вариант в старых IE
• Использует анимации @keyframe, возвращаясь к setTimeout ()
• Работает во всех основных браузерахвключая IE6
• Лицензия MIT

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

Answer 3

демо

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

Answer 4

Мухаммед - загрузка изображения в «скрытом» разделе разрешит задержку при загрузке изображения.однако, я полагаю, что ваш вопрос больше интересует альтернативы изображению, чем разрешению задержки как таковой.

Answer 5

Может быть что-то вроде:

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

Мех.Это немного не элегантно.Он принимает обратный вызов, который возвращает, должен ли он остановиться.