Adding JQTouch Loading Image onClick

Question

I was wondering if there's a way to add a loading.gif image to all pages that are linked via. . I've been reading up on StackOverFlow for hours and I haven't found anything that works. I'd like to use this to display a loading image and disable the buttons until the page has loaded, then show the page.

So Show the loading image while the document is opening and then remove the loading image once the doc has loaded.

I would have pasted some code, but all the ones that I tried did not work. Could someone lead me in the right direction or if there's a simple code snippet, I'd greatly appreciate it.

Answer 1

This works for jQTouch using Zepto (haven't tested with jQuery).

HTML:

<div id="jqt">
    ...
    <div id="loading"></div>
</div>

CSS:

div#jqt #loading {
  background: rgba(0,0,0,0.5) url('../images/scanner/loading.gif') 50% 50% no-repeat;
  z-index: 999;
  position: fixed;
}

JS:

$(document).on('ajaxStart', function(){
    $('#loading').addClass('current');
});

$(document).on('ajaxStop', function(){
    $('#loading').removeClass('current');
});