Javascript - значок загрузки в SetTimeout

Question

У меня есть цикл, в котором установлена ​​переменная времени ожидания.Как сделать значок загрузки во время обратного отсчета, а затем, возможно, иметь немного кода, который остановит его вращение (или просто отображение).Я думал, что jquery rotate может сработать, но я не заинтересован в плагинах.

Answer 1

http://fgnass.github.com/spin.js/ выглядит довольно неплохо, если вы не возражаете против использования немного JavaScript.Другой возможностью является GIF, который вы просто показываете и скрываете вручную, который вы можете сгенерировать с помощью чего-то вроде http://ajaxload.info/.

Answer 2

function imgload(){
setTimeout(function(){$('#response').html('<img src="imagse/load.gif">');  },2000);
}


the load image rotates for 2 seconds..

Answer 3

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

var countdown = 5000;  // your countdown in milliseconds

setTimeout(function() {
    // hide your loading image after "countdown" milliseconds
    document.getElementById("loading-image").setAttribute("style","display:none");

}, countdown);

// show your loading image
document.getElementById("loading-image").setAttribute("style","display:block");


<img style="display:none" src="/loading.gif" id="loading-image" alt="Loading..." />

Конечно, если вы хотите, чтобы загрузка изображения остановилась на основе какого-либо другого события, вы можете просто скрыть изображение в этом конкретном методе обратного вызова, используя:

document.getElementById("loading-image").setAttribute("style","display:none");

Теперь, когда у вас есть этот ответ, я призываю вас пересмотреть свою позицию в отношении плагинов. Лучшие инженеры в любой области опираются на платформы, которые были до них. Когда вы стоите на плечах великанов, вы многое можете сделать очень быстро.