The first line checks to see if we are already loading an image; if we are we return to keep from going further.
Then we add the loading class, which with some CSS and a spinner from ajaxload.info gives some nice user feedback that something is happening.

var loadImage = function(url) {
    if(container.is('.loading')) { return; }
    container.addClass('loading');
    var img = new Image();
    img.onload = function() {
      img.style.display = 'none';
      
      var maxWidth = ($(window).width() - parseInt(container.css('padding-left'),10) - parseInt(container.css('padding-right'), 10)) - 100;
      var maxHeight = (($(window).height() > window.innerHeight ? window.innerHeight : $(window).height()) - parseInt(container.css('padding-top'),10) - parseInt(container.css('padding-bottom'), 10)) - 100;
      
      if(img.width > maxWidth || img.height > maxHeight) { // One of these is larger than the window
        var ratio = img.width / img.height;
        if(img.height >= maxHeight) {
          img.height = maxHeight;
          img.width = maxHeight * ratio;
        } else {
          img.width = maxWidth;
          img.height = maxWidth * ratio;
        }
      }
      
      container.animate({'width': img.width,'height': img.height, 'top': Math.round((($(window).height() > window.innerHeight ? window.innerHeight : $(window).height()) - img.height - parseInt(container.css('padding-top'),10) - parseInt(container.css('padding-bottom'),10)) / 2) + 'px', 'left': Math.round(($(window).width() - img.width - parseInt(container.css('padding-left'),10) - parseInt(container.css('padding-right'),10)) / 2) + 'px'},'normal', function(){
        target.append(img);
        $(img).fadeIn('normal', function() {
          container.removeClass('loading');
        });
      })