Question

Im using this jquery code to switch page content on my site. It switches the content but it seems to flicker the page before switching to the new. I thought it might be to do with the CSS not loading through properly before it changes the content because my jquery scrollbar doesn’t load properly if i’ve clicked the link to view the page however if I refresh the page just once it seems to be working fine again.

Is there someway the code can check everything is ready before switching to avoid the glitchy flickering?

here my code for switching the page content

$(document).ready(function() {

var hash = window.location.hash.substr(1);
var href = $('#nav li a').each(function(){
    var href = $(this).attr('href');
    if(hash==href.substr(0,href.length-5)){
        var toLoad = hash+'.html #content';
        $('#content').load(toLoad)
       }                                            
});

$('#nav li a').click(function(){

    var toLoad = $(this).attr('href')+' #content';
    $('#content').fadeOut('fast',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() {
        $('#content').load(toLoad,'',showNewContent())
    }
    function showNewContent() {
        $('#content').fadeIn('normal',hideLoader());
    }
    function hideLoader() {
        $('#load').fadeOut('normal');
    }
    return false;

});

 });

Answer 1

I see one issue, these two lines:

$('#content').load(toLoad,showNewContent())
$('#content').fadeIn('normal',hideLoader());

need to be:

$('#content').load(toLoad,showNewContent);
$('#content').fadeIn('normal',hideLoader);

If you aren’t passing any data, you can omit it, and the complete argument needs to be reference to a named function or an anonymous function. what you had was the result of executing showNewContent() which is undefined.

function showNewContent() {
  $("body").scrollTop();
  $('#content').fadeIn('normal',hideLoader);  
}