jQuery页面加载器问题

时间:2011-06-05 09:12:28

标签: jquery ajax loader

我正在使用以下代码使用jQuery动态加载页面。页面加载有效,但是当您单击导航链接以加载新页面时,旧页面会在屏幕上闪烁,就像它再次加载上一页一样。点击“联系”导航链接,看看我的意思:http://ghostpool.com/wordpress/buzz。为什么会这样?

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();
    jQuery('#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;

});

});

1 个答案:

答案 0 :(得分:0)

默认行为仍在运行。你必须使用以下方法之一禁用它:

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

e.preventDefault();

// or 

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

编辑:

重新阅读你的代码之后,我会看到你的功能有不寻常的东西:

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

而不是传递回调函数,而不是传递返回值。这是应该如何

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

不删除括号