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 !!

Answer 2

If you want your custom loading, then replace JQM default loading gif under..

yourFolder\css\themes\default\images\ajax-loader.gif with your gif, rename your gif the same name as ajax-loader.gif.

Then, call this show/hide script.

$(".ui-loader").show();
// ...
$(".ui-loader").hide();

Don't remove it, let it always be there, just show and hide like JQM did.

Answer 3

Ok, added an another answer, try to hide the loader after page show, instead of setTimeout.

Check demo here http://jsfiddle.net/yeyene/CVv2q/3/

JQUERY

$("#btn_id").on('vclick', function(e){
    $(".ui-loader").show();
    $.mobile.changePage( "#page2", {reverse: false,  changeHash: true});
});
$( "#page2" ).on( "pageshow", function( event, ui ) {
    $(".ui-loader").hide();  
});

HTML

<div data-role="page">
    <div data-role="header">
        <h1>Page Title</h1>
    </div><!-- /header -->

    <div data-role="content">
        <p>Page content goes here.</p>
        <button id="btn_id">Go to Page 2</button>
    </div><!-- /content -->

    <div data-role="footer" data-position="fixed">
        <h4>Page Footer</h4>
    </div><!-- /footer -->
</div><!-- /page -->

<div id="page2" data-role="page">
    <div data-role="header">
        <h1>Page 2</h1>
    </div><!-- /header -->

    <div data-role="content">
        <p>Page content goes here.</p>
    </div><!-- /content -->

    <div data-role="footer" data-position="fixed">
        <h4>Page Footer</h4>
    </div><!-- /footer -->
</div><!-- /page -->