jQuery - making sure content is loaded before it's faded in?

Question

Hi, Nick Craver really helped me out alot with this code in this thread http://stackoverflow.com/questions/2743443/jquery-can-someone-help-stitching-jquery-code-with-ajaxcomplete/2743791#2743791

And it is working. But I notice that there's a small delay after I've clicked a link and before the content is actually loaded. It's not very intense content that's loaded either so I think it's got something to do with the order which things happen in the script.

The original code looks like this:

$('.dynload').live('click',
 function(){

 var toLoad = $(this).attr('href')+' #content';
 $('#content').fadeOut('fast',loadContent);
 $('#ajaxloader').fadeIn('normal'); 

 function loadContent() {
     $('#content').load(toLoad,'',showNewContent())
 }
 function showNewContent() {
    $('#content').fadeIn('fast',hideLoader());
    //Cufon.replace('h1, h2, h3, h4, .menuwrapper', { fontFamily: 
'advent'}); 
 }
 function hideLoader() {
     $('#ajaxloader').fadeOut('normal');
 }

 return false;

 });

The new code looks like this:

$(function() {
  $('.dynload').live('click', function(){
    $('#ajaxloader').fadeIn('fast');
    $('#ajaxloaderfridge').fadeIn('fast');
    var href = this.href + ' #content';

    $('#content').fadeOut('fast',function() {
      $(this).load(href,'', function(data) {
        createMenus();
        $('#ajaxloader').fadeOut('fast');
        $('#ajaxloaderfridge').fadeOut('fast');
        $('#content').fadeIn('fast');
        Cufon.replace('h1, h2, h3, h4, .menuwrapper', { fontFamily: 'advent'});
      });
    }); 
    return false;
  });
});
$(createMenus);

function createMenus() {
  $('#kontrollpanel .slidepanels').kwicks({
     min : 42,
     spacing : 3,
     isVertical : true,
     sticky : true,
     event : 'click'
  });                    
}

In the original code, #content is faded out, then the function "loadContent" is started. Which is basically what is happening in the new script as well isn't it? And when I was using the old code, the content just faded out and faded in really fast and smooth and with no small pause delay before the content arrived.

Answer 1

UPDATED:

$('#content').fadeOut('fast',function() {
      $(this).load(href,'', function(data) {
        createMenus();
        $('#ajaxloader,#ajaxloaderfridge').hide();
       // $('#ajaxloaderfridge').fadeOut('fast');
        $('#content').fadeIn('fast');
        Cufon.replace('h1, h2, h3, h4, .menuwrapper', { fontFamily: 'advent'});
      });
   });

OR try this:

$('#content').fadeOut('fast',function() {
  $(this).load(href, '', function(data) {
        createMenus();
        $('#ajaxloader,#ajaxloaderfridge').hide();
        Cufon.replace('h1, h2, h3, h4, .menuwrapper', {
            fontFamily: 'advent'
        });
    });
}).fadeIn('fast');

Answer 2

The problem with your original code is this:

$('#content').load(toLoad,'',showNewContent())

You're actually calling showNewContent right then and there. You want to pass it as a callback. It should look like:

$('#content').load(toLoad,'',showNewContent)

Same with:

$('#content').fadeIn('fast',hideLoader());

should be:

$('#content').fadeIn('fast',hideLoader);

Answer 3

For a faster load, change your click handler to this:

$('.dynload').die('click').live('click', function(){
  $('#ajaxloader, #ajaxloaderfridge').fadeIn('fast');
  var href = this.href + ' #content';
  $('#content').fadeOut('fast').load(href, function(data) {
    createMenus();
    $('#ajaxloader, #ajaxloaderfridge').fadeOut('fast');
    $(this).stop().fadeTo('fast', 1);
    Cufon.replace('h1, h2, h3, h4, .menuwrapper', { fontFamily: 'advent'});
  }); 
  return false;
});

This triggers loading of the content immediately, not waiting for the fade to finish. This means you're content is loading 200ms faster, if it loads before the fadeOut finishes, no problem, it stops the fade and starts fading back in.