jquery mobile: how to completely remove the pre-lo

Question

By changing the CSS for jquery mobile you can remove the pre-loader image on page reloads, but still a grey circle appears on page reloads.

What would be the way to remove the preload indication in jquery mobile all together?

Answer 1

The accepted answer was not working for me in jQuery Mobile 1.4. I wanted to completely disable the Ajax loading so I have the

$.mobile.ajaxEnabled = false; 

already running between the declaring of jQuery and jQuery Mobile files, but I was still seeing the grey circle.

I came up with this in my css file

.ui-loader {
  display:none !important;
}

and then the grey circle is gone. But, a tester pointed out that I was still getting a javascript error on the page that it was failing to load ajax-loader.gif. I searched around and found this in jquery.mobile-1.4.0.css

/* Loader */
.ui-icon-loading {
    background: url(images/ajax-loader.gif);
    background-size: 2.875em 2.875em;
}

So, I just also added this to my css file

.ui-icon-loading {
    background:none !important;
}

and now the javascript error is gone too.

Answer 2

A bit late but maybe SO users could find this useful, I ran to this same problem and found that you can show | hide the loader using the $.mobile.loading() function so:

To show:

$.mobile.loading( 'show', {
    text: 'Verificando Datos',
    textVisible: true,
    theme: 'z',
    html: ""
});

To hide:

$.mobile.loading('hide');

Answer 3

The best way would be to disable it altogether.

Try using this on mobileinit event:

$.mobile.loadingMessage = false;

This should fully disable it:

$.mobile.hidePageLoadingMsg()

More about this (with some examples) can be found in jQuery mobile documentation here.