Jquerymobile Loading spinner Dialog before page is Loaded

Question

In my app I have 3 pages from the first page I am sending data to server, here I want to show a Loading dialog until the send operation (posting to server) is finished and then go to page two. Doing a below but it's not working

<script type="text/javascript">
$(document).on('pageshow', '#Page2' ,function () {
  setTimeout(function () {
   $.mobile.changePage('#dialog');
  }, 100); // delay above zero
});
</script>

Try2

<script>  
    $(document).on("pagecreate","#page", function () {
    $("#custom-li").on("click", function () {
   var orgname = $('input:text[id=name]').val();

    loadingStart();
    setTimeout(function () {
        loadingEnd();
        $.mobile.changePage('#page2');
    }, 3000);
    return false;
   });       
});
function loadingStart() {
    $.mobile.loading('show', {
        text: "loading",
        textVisible: true
    });
}
function loadingEnd() {
    $.mobile.loading("hide");
}
</script>

the function is firing but the spinner is missing from the dialog when I run in browser and mobile.

Any help is appreciated.

Answer 1

So is only spinner missing? In this case, maybe you don't have "images/ajax-loader.gif" at html files directory.