jQuery - making sure content is loaded before it's faded in?
- by Kenny Bones
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.
