.load callback function works sometimes?
<p>My image gallery has next and previous links, when the user click on either one it loads an image in the #the_image div, but I need the image resize everytime.  My thinking I would put the code to resize the image as a callback function for the .load. But's it doesn't work everytime.  Odd thing also, if I put an <code>alert("blah");</code> after <code>image = $('#the_image');</code> the image get's positioned correctly every time. Any ideas?</p>

<p>Here's my JS:</p>

<pre><code>&lt;script type="text/javascript"&gt;
$(document).ready(function() {
   $('#previous').live('click', function(e){
     $('#img_wrapper').load( $(this).attr('href') + ' #container',function () {
      var height = $(window).height();
      var width = $(document).width();
      var image = $('#the_image');  
      $("#the_image").css("max-height",height-200); 
      image.css({
       'max-height': height-200,     
       'left': width/2 - (image.width() /2)-5,
       'top': height/2 -(image.height() /2),
      });
      prev = $('#previous'); next = $('#next');
      prev.css({
       'left': 0,
       'top': (height/2)-150,
      });
      next.css({
       'left': 924,
       'top': (height/2)-150,
      }); 
     });     
    e.preventDefault(); 
  }); 
});  
&lt;/script&gt;
</code></pre>

<p><strong>This is what works. Thanks to Jasper, had to modify his code a bit:</strong></p>

<pre><code>$(function() {
    $(document).delegate('#next', 'click', function (e) {
        $('#img_wrapper').load( $(this).attr('href') + ' #container',function () {

            var height = $(window).height(),
                width  = $(document).width();

            $("#the_image").bind('load', function() {
               var image = $('#the_image'); 
               $("#the_image").css("max-height",height-200); 
               image.css({
                  'max-height': height-200,  
                  'left': width/2 - (image.width() /2)-5,
                  'top': height/2 -(image.height() /2),
               });
            });

            $('#previous').css({
                'left' : 0,
                'top'  : ((height / 2) - 150),
            });

            $('#next').css({
                'left' : 924,
                'top'  : ((height / 2) - 150),
            });
        });
        e.preventDefault();
    });
});
</code></pre>
