开发者

jQuery Page Loader Problem

开发者 https://www.devze.com 2023-03-10 17:50 出处:网络
I\'m using the following code to load the pages dynamically with jQuery. The page loading works, but when you click the nav link to load a new page the old page flashes on the screen as if it\'s loadi

I'm using the following code to load the pages dynamically with jQuery. The page loading works, but when you click the nav link to load a new page the old page flashes on the screen as if it's loading the previous page again. Click on the "Contact" nav link and see what I mean: http://ghostpool.com/wordpress/buzz. Why is this happening?

jQuery(document).ready(function() {

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

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

    var toLoad = jQuery(this).attr('href')+' #content';
    jQuery('#content').hide('fast',loadContent);
    jQuery('#load').remove();
    jQuer开发者_开发知识库y('#page-wrapper').append('<span id="load">LOADING...</span>');
    jQuery('#load').fadeIn('normal');
    window.location.hash = jQuery(this).attr('href').substr(0,jQuery(this).attr('href').length-5);
    function loadContent() {
        jQuery('#content').load(toLoad,'',showNewContent())
    }
    function showNewContent() {
        jQuery('#content').show('normal',hideLoader());
    }
    function hideLoader() {
        jQuery('#load').fadeOut('normal');
    }
    return false;

});

});


The default behaviour is still running. you have to disable it using one of these ways:

jQuery('#nav li a').click(function(e){

e.preventDefault();

// or 

return false;// at the end of the function
}

EDIT:

After re-reading your code i see unusual stuff here wit your functions:

function loadContent() {
    jQuery('#content').load(toLoad,'',showNewContent())
}
function showNewContent() {
    jQuery('#content').show('normal',hideLoader());
}

instead of passing the callback functions you are passing the return value. here is how it should be

jQuery('#content').load(toLoad,'',showNewContent);
...
jQuery('#content').show('normal',hideLoader);

not the parentheses are removed

0

精彩评论

暂无评论...
验证码 换一张
取 消