Question

I am using AJAX functionality to make my WordPress pages load in real time. I use the following approach to make it load in real time

var toLoad = $(this).attr('href')+' #container';
$('#container').slideUp('300',loadContent);
$('#load').remove();
$('#wrapper').append('<span id="load">LOADING...</span>');
$('#load').fadeIn('normal');
window.location.hash = $(this).attr('href').substr(0,$(this).attr('href').length-5);
function loadContent() {
$('#container').load(toLoad,'',showNewContent())
}
function showNewContent() {
$('#container').slideDown('400',hideLoader());
}
function hideLoader() {
$('#load').fadeOut('normal');
}
return false;


The problem i am facing is that the loading… text appear for half a second and the old content appears again.. and then after 4-5 seconds, it just replaces the new content with the old one.
How can i keep the Loading Text until the content is fully loaded.

Answer 1

Question is not perfectly clear to me,

But,

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

should be changed to

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

and,

$('#container').slideDown('400',hideLoader());

to

$('#container').slideDown('400',hideLoader);

We pass the function reference ( we dont call them )

Also, I dont think there’s any .fadeIn('normal').

It would be either .fadeIn('slow') or .fadeIn('fast')

Also,

lines following this

$('#container').slideUp('300',loadContent);

do not wait for animation completion. They gets called instantly.

I guess, you would want them to put in loadContent function