Embedding a Loader image for the jQuery / Javascript image gallery using .load ();

Question

I use the code below for the image gallery and would like to show the gif loader in the background when loading images, and then delete it after loading the image.

What is the best way to do this?

Note. I have already attached .fadeIn() and .fadeOut() with great luck (it seemed that both appeared at the same time.

  $('ul a').click(function(e) { e.preventDefault(); var src = $(this).attr("href"); $('#main-img img').fadeOut(400, function() { $('<img/>').attr('src', src).load(function() { $('#main-img img').attr('src', this.src).fadeIn(400); }) }) }); 

Answer 1

I put together a JSFiddle that seems to work (red is your boot image). Did you register your click before the DOM fully loaded? The only thing I see is that I will register it in Document Ready.

http://jsfiddle.net/sSt3x/2/

Note. The images are very large (4000x4000 or so), so give it a moment and the first image will not disappear, so loading is required first. Customize your behavior if necessary.