1

I have an intensive jQuery function that takes place on my page when a button is clicked. I display a loading gif while this takes place. This can take around 5 seconds.

The problem I have is that the animated gif stops spinning while the JavaScript is processing, causing users to think it's crashed. Is there a way to ensure the loading gif remains spinning?

$('button').click(function() {
  myFunction();
});

function myFunction() {
  var text = "";
  var i = 0;
  while (i < 50500) {
    text += "<br>The number is " + i;
    i++;
  }
  $("p").append(text);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img src="http://thinkfuture.com/wp-content/uploads/2013/10/loading_spinner.gif" />
<button>click here</button>
<p></p>

DEMO http://jsfiddle.net/wgh2oseu/1/

j08691
  • 204,283
  • 31
  • 260
  • 272
  • this might help: http://stackoverflow.com/a/12419667/526704 – DLeh Mar 09 '15 at 19:20
  • No; Javascript is single-threaded. What are you doing that is slow? – SLaks Mar 09 '15 at 19:21
  • Did you notice this thread? Maybe helpful? http://stackoverflow.com/questions/191413/why-does-my-spinner-gif-stop-while-jquery-ajax-call-is-running –  Mar 09 '15 at 19:27
  • I have already come across those questions. Unfortunately none of them provide a solution. –  Mar 09 '15 at 19:35

0 Answers0