Jquery - Does the ajax/load() method automatically show the content it's loaded?

Question

I'm really stuck here... I've built a small gallery to display images.

It consists of an initial front page with 12 thumbnails arranged in a grid. When click on a thumbnail they collapse to the left of the screen and show the appropriate gallery item. When you rollback over the collapse thumbnails they expand and hide the gallery item underneath. You can now select another thumbnail which will collapse the thumbnails again and show another gallery item.

I'm pretty happy with everything so far except for when you click a second (third, forth etc...) thumbnail. It fades up the old gallery item and then switches to the new gallery item once it's loaded.

The way I think I've written the script is to fade out the DIV containing the node content and then use a callback to execute the ajax .load() method to load the new gallery item in (as well as doing some other bits to content within this DIV). I then fade the DIV back in after the main image has loaded. It looks like the .load() displays the element that it's being called on as soon as it is executed. Is this the intended behavior?

I'm starting to think this is a bit over my head now as I've been going round in circles for ages now! I'd appreciate any feedback - thanks!

Here's a link to the test site: http://hunter-design.dobwebdesign.co.uk/

And I've included the relevant JS here:

$(window).ready(function() {

$('#grid-navigation li').click(function(){   
 var url = $('a', this).attr('href');
 var toLoad = url +' #node-content';

 $('#node-content').fadeOut('fast', function() {
  $('#node-content').load(toLoad, '', function(){
   $('#focused-case-study-image').hide();
   $('.case-study-images').attr({style:'display:none'});
   $('.case-study-images-thumbnails').attr({style:'display:block'});
   $('.case-study-images-thumbnails li:first').addClass('active');
   $('#focused-case-study-image').load(url + ' .case-study-images li:first img','',function() {
    $('#focused-case-study-image img').load(function() {
     $('#focused-case-study-image').fadeIn('normal');        
     $('#node-content').fadeIn('normal');
    });
   });
   setThumbnails(url); 
  });
 });

 $("#grid-navigation li").animate({width:"38px"},{ queue:false, duration:300 });
});


function loadContent(toLoad, url) {
 $('#node-content').hide();
 $('#node-content').load(toLoad, '', function(){
  $('#focused-case-study-image').hide();
  $('.case-study-images').attr({style:'display:none'});
  $('.case-study-images-thumbnails').attr({style:'display:block'});
  $('.case-study-images-thumbnails li:first').addClass('active');
  $('#focused-case-study-image').load(url + ' .case-study-images li:first img','',function() {
   $('#focused-case-study-image img').load(function() {
    $('#focused-case-study-image').fadeIn('normal');        
    $('#node-content').fadeIn('normal');
   });
  });
  setThumbnails(url); 
 });  
}

function setThumbnails(url) {
 $('.case-study-images-thumbnails li').click(function(){
  var liClass = $(this).attr('class');
  $('.case-study-images-thumbnails li').removeClass('active');
  $(this).addClass('active');
  $('#focused-case-study-image').fadeOut('fast', function(){
   $('#focused-case-study-image').load(url + ' .case-study-images li.' + liClass + ' img','',function(){
    $('#focused-case-study-image img').load(function() {
     $('#focused-case-study-image').fadeIn('normal');        
    });
   }); 
  });
 });
}

});

Answer 1

2 places i see:

$('#focused-case-study-image img').load(function() {

where's the URL to load?

Answer 2

I'm only getting that weird behavior you described part of the time.

I see that you are hiding the node content right before you load something. Instead I would suggest hiding the node-content whenever the user mouseovers the collapsed thumbnails and they expand again.

That way, the content back there will be hidden until something else is loaded.

Answer 3

It looks to be that your AJAX requests are returning entire HTML pages, and that's no good. Try returning just the data you need in JSON.

Also, unless you're data is going to be getting a lot bigger, I would suggest not worrying about using AJAX. You've got about two paragraphs and a url or two for each to load for each image, making about 32 paragraphs, which isn't much. Having an animation wait for an AJAX call to complete is going to make things chopy and cause delays. I would suggest embedding the data you need as a JSON data island into the page before it is sent to the client.