Preloader Gif-Image Stuck in Mobile Applications

Question

I am working in jQueryMobile(1.3.1) and Phonegap(2.7.0) for Android and iPhone applications. Currently am facing an issue related with Preloader Image. I am using a Gif image as preloader.

I'm using a custom function for the preloader functionality: showLoading()

function showLoading()
{
  $("body").append("<div id='overlay'></div><img src='images/loading.gif' id='loader_image'/> ");
}

To hide the preloader am using another function: hideLoading()

function hideLoading()
{
  $("#overlay,#loader_image").remove();
}

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.

   $("#menubooking,#booking").on('click',function(event){
    showLoading();

    $.mobile.changePage( "#mobile_page_form_bookacar", {reverse: false,  changeHash: true});
    event.preventDefault();

});

Because of this, I use the setTimeout function() to get it to work.

My code now looks like:

 $("#menubooking,#booking").on('click',function(event){
    showLoading();
    setTimeout(function(){ 
    $.mobile.changePage( "#mobile_page_form_bookacar", {reverse: false,  changeHash: true});
    event.preventDefault();
    },200);
});

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.

I don't get what the exact issue is in this case.

My Preloader...

After 200ms its looks like (before change the page..)

I already checked with jQueryMobile Preloader but it also sticks like my custom preloader.

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.

Please Help..

Answer 1

I tried CSS3 Animation instead of Gif image and my problem solved !!