Hi there,

I am loading some content dynamically using the .load() function in jQuery;

The script works like this:
Code:
$(document).ready(function(){
  $('.load-button').click(function(){
    $('#target').load('remotepage.html div#object', function(){
      $('#slider').animate({top: -100px});
    });
  });
});
So once the content is loaded, div#slider moves to reveal the new content. The div will move once all the text is loaded but not the images, which is fine. The images will be loading when the viewer first clicks on a.load-button.

What I'd like to do is to hide the image until it is fully loaded into the cache, have an animated 'loading' gif as a background image, then BOOM, the image appears in one go with .show();

I'm a little unsure how to approach this, since I'm already using the .load() callback function. I've tried using $(window).load(function(show image)), but jQuery dosen't like that.

Many thanks in advance,
Mike