0

I have weird problem that I cant figure it out. I've made mobile app with jQuery and Phonegap. In my app I am calling some web-services to get data and when I do that it takes a few seconds so I want to show to user a loading bar. I have written my own loading presentation with .gif picture which I add to screen with javascript before service request. My problem is that this .gif is not added to screen until web service function is almost half or completely through. Like I would call it asynchronously, but as far as know It is all on one thread. So how could I achieve this?

(pseudo code)

showLoading();
callWebService();
stopLoading();
gorgi93
  • 2,457
  • 8
  • 30
  • 53

1 Answers1

1

I've had issues similar to this, which have been resolved by adding the later actions into a setTimeout with interval 0:

showLoading();
setTimeout(function(){
    callWebService();
    stopLoading();
}, 0);

More detail about this technique can be found in this question, but basically the timeout allows the browser to complete any UI updates (such as rendering your loading image) before continuing to execute the JavaScript code.

Community
  • 1
  • 1
codebox
  • 19,927
  • 9
  • 63
  • 81
  • that almost did the trick... :D I mean it rendered the picture so you gave me right answer, but another silly thing. I want to render loading gif and gif doesnt show animation. It just render first gif picture. Is there any way to fix that? (dont think so) – gorgi93 Sep 11 '12 at 12:24
  • 1
    hmm - not sure about that - maybe you should start another question? – codebox Sep 11 '12 at 12:33