0

I have a list of small images. When i click one I do an ajax call to load some content from the server. since it takes a few seconds, i want to have an ajax loading icon overlay on top of the existing image and simulteneously gray out the thumbmail to show that something is loading.

what is the best way to overlay an ajax icon in the middle of an image. I know i can put it next to the image with something like this (when i click on the image):

var spinner = $("<img src='/Content/images/ajax-loader.gif' />").insertAfter(this);

but i want to have it on top of the image (and they gray out) versus to the side because the code above causes all of the other images to shift over and it looks a little off.

leora
  • 163,579
  • 332
  • 834
  • 1,328
  • take a look here, there several example of adding spinner http://stackoverflow.com/questions/68485/how-to-show-loading-spinner-in-jquery – Anton Baksheiev Sep 22 '12 at 11:58

1 Answers1

1

I use spin.js, wrapped in this little jquery plugin.

So I just do:

$el = $("#el");  // cache element fo further reference

$el.spin();      // put spinner in the middle of selected element.

// do your stuff...

$el.spin(false); // dismiss spinner.

See it live here.

moonwave99
  • 19,895
  • 2
  • 38
  • 62
  • thanks - is there anyway to gray out the image that you clicked while the spinner is shown – leora Sep 22 '12 at 12:22