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.

ColinM · Accepted Answer · 2013-02-01 19:48:59Z

0

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');
});

answered Feb 1, 2013 at 19:48

ColinM

14.1k4 gold badges47 silver badges52 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Adding JQTouch Loading Image onClick

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related