Question

我正在使用此jquery代码切换我网站上的页面内容。它切换内容但似乎在切换到新页面之前闪烁页面。我认为可能是因为CSS在更改内容之前未正确加载，因为如果我点击链接查看页面，我的jquery滚动条无法正确加载，但如果我只是刷新页面一次再次正常工作。

有没有代码可以在切换前检查所有内容是否准备好以避免毛刺闪烁？

这里是我切换页面内容的代码

$(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

我看到一个问题，这两行：

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

需要：

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

如果您没有传递任何数据，则可以省略它，并且完整参数需要引用命名函数或匿名函数。你所拥有的是执行showNewContent()的结果，这是未定义的。

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

我怎样才能修复我的jquery中的故障

1 个答案: