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

Posted by Kenny Bones on Stack Overflow See other posts from Stack Overflow or by Kenny Bones
Published on 2010-05-01T10:27:53Z Indexed on 2010/05/01 10:37 UTC
Read the original article Hit count: 156

Filed under:
|
|

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.

© Stack Overflow or respective owner

Related posts about JavaScript

Related posts about jQuery