0

here is the project page: http://blog.papermusepress.com/s7/tabs/ it's all html so feel free to view source for code.

basically, as you type in fields on the form the image is dynamically getting generated on adobe's servers via a URL string and then rendered on the page via javascript updating the image src to the URL string.

i'm trying to get a simple image loader every time the image is being regenerated. the image generation really happens so fast that it is probably not necessary (but my company wants to include it so customers know the product is actually getting updated).

all the answers I find talk about ajax (How to show loading spinner in jQuery?) . but the problem is that I am not using ajax in the project at all. maybe i should be using ajax?

the only jquery i am using is to do the tabs hiding/displaying the appropriate div. the image generation is an onclick js function. i'm new to js so my stuff is really basic. could definitely use suggestions to "clean up" my code. i'm sure its ugly!

Community
  • 1
  • 1
thindery
  • 1,164
  • 4
  • 23
  • 40
  • 1
    On click show the loader, then bind a load event to the img element that hides the loader. – Kevin B May 29 '12 at 20:16
  • for a cleanup suggestion, you should validate the fields when you click the update...if someone pastes a hex code in with the #, you break, so you should check that value, strip the # if need be – Robot Woods May 29 '12 at 20:21

1 Answers1

1

ajax in jquery is easy.

jQuery.ajax(’url which contains code or ready flag.’).done(function(htmldata){
// if done loading do everything that is here. 
// the variable htmldata contains the html code that is output by your server.
});
Tschallacka
  • 27,901
  • 14
  • 88
  • 133