title: Preloader Gif-Image Stuck in Mobile Applications
body: <p>I am working in jQueryMobile(<strong>1.3.1</strong>) and Phonegap(<strong>2.7.0</strong>) for Android and iPhone applications. Currently am facing an issue related with Preloader Image. I am using a Gif image as preloader.</p>
  
  <p>I'm using a custom function for the preloader functionality: <strong>showLoading()</strong></p>
  
  <pre><code>function showLoading()
  {
    $("body").append("&lt;div id='overlay'&gt;&lt;/div&gt;&lt;img src='images/loading.gif' id='loader_image'/&gt; ");
  }
  </code></pre>
  
  <p>To hide the preloader am using another function: <strong>hideLoading()</strong></p>
  
  <pre><code>function hideLoading()
  {
    $("#overlay,#loader_image").remove();
  }
  </code></pre>
  
  <p>My problem is when I try to move from one page to another, when a event is fired like a button click, the preloader is not animating. </p>
  
  <pre><code>   $("#menubooking,#booking").on('click',function(event){
      showLoading();
  
      $.mobile.changePage( "#mobile_page_form_bookacar", {reverse: false,  changeHash: true});
      event.preventDefault();
  
  });
  </code></pre>
  
  <p>Because of this, I use the <strong>setTimeout function()</strong>  to get it to work.</p>
  
  <p>My code now looks like:</p>
  
  <pre><code> $("#menubooking,#booking").on('click',function(event){
      showLoading();
      setTimeout(function(){ 
      $.mobile.changePage( "#mobile_page_form_bookacar", {reverse: false,  changeHash: true});
      event.preventDefault();
      },200);
  });
  </code></pre>
  
  <p>Now my Preloader is works, but the preloader image sticks (not animated) after 200ms, and it looks like a normal jpg image. When I click on a button, my preloader works for that exact 200ms and then sticks. The other functions are working smoothly, though: the API call for the next page, and everything else.</p>
  
  <p>I don't get what the exact issue is in this case.</p>
  
  <p><strong>My Preloader...</strong>
  <img src="https://i.stack.imgur.com/2IdEP.gif" alt="enter image description here"></p>
  
  <p><strong>After 200ms its looks like</strong> (before change the page..)
  <img src="https://i.stack.imgur.com/waObM.png" alt="enter image description here"></p>
  
  <p><strong>I already checked with jQueryMobile Preloader but it also sticks like my custom preloader.</strong></p>
  
  <p>I know that using the setTimeout function will affect the performance of my application, but I am forced to use it for the preloader to work.
  I think this may be happening because of a small issue... but I don't get why it's happening. I have lost a lot of my valuable time trying to fix this issue.</p>
  
  <p>Please Help.. </p>