JQuery Ajax: Old content flicks in before showing the loaded content

have a problem with my ajax code开发者_如何学C. I have some links and a content area. When i click on a link, i hide the content area, load the new data and show the content area again. It works, but when showing the content area, you see the old content for a short time and then it flickers to the new content.

Can i somehow let the loading screen appear for a longer time? Also the hide function only works the first time i use a link.

jQuery(document).ready(function() {

jQuery('.ajax').click(function(){  

var toLoad = jQuery(this).attr('href'); 
jQuery('#ajax_content').hide('slow',loadContent);  
jQuery('#load').remove();  
jQuery('#main').append('<span id="load">LOADING...</span>');  
jQuery('#load').fadeIn('normal');  

function loadContent() {  
    jQuery('#ajax_content').load(toLoad,'',showNewContent())  
}  
function showNewContent() {  
    jQuery('#ajax_content').show('normal',hideLoader());  
}  
function hideLoader() {  
    jQuery('#load').fadeOut('normal');  
}  
return false;  

});  

});

I have this ajax code from this source

Thanks in advance!

You could try emptying your content element before issuing the AJAX retrieve command:

jQuery(document).ready(function() {

jQuery('.ajax').click(function(){  

var toLoad = jQuery(this).attr('href'); 
jQuery('#ajax_content').hide('slow',loadContent);  
jQuery('#load').remove();  
jQuery('#main').append('<span id="load">LOADING...</span>');  
jQuery('#load').fadeIn('normal');  

function loadContent() {  
    jQuery('#ajax_content').empty().load(toLoad,'',showNewContent())  
}  
function showNewContent() {  
    jQuery('#ajax_content').show('normal',hideLoader());  
}  
function hideLoader() {  
    jQuery('#load').fadeOut('normal');  
}  
return false;  

});  

});

To make the application more robust, you can also use the .queue() methods to build a queue of actions. Then when a user clicks another link while one is already loading, it's easy to cancel.