Question

I have created a phonegap app which calls a web service on initialization (onload of index.html). I am making the call using

 $.ajax({
  type: "GET",
  url: "http://webserviceurl.com/service",
  cache: false,
  async: true, 
  success: onSuccess,
  error: onError,
  timeout: 40000
});

Now if the webservice is not available, the service call waits for 40 seconds (limit I set as timeout) and transfers the control to onError message, which inturn shows a simple alert message for error.

But my problem is, app shows a blank screen and doesn’t show the html page untill the service call finishes (40 seconds). I want the webservice call to execute at backend and doesn’t effect loading of actual app (I thought async:true will help, but that does not).

Any ideas how can I make my app independent of webservice call?

Edit
This worked

function appReady(){
      // do the ajax here
}

document.addEventListener("deviceready", appReady, false);

Answer 1

Can you do that like this

$(document).ready(function() {

$.ajax({
  type: "GET",
  url: "http://webserviceurl.com/service",
  cache: false,
  async: true, 
  success: onSuccess,
  error: onError,
  timeout: 40000
});

});

Now your ajax query will be made after document is ready (fully loaded)