jquery - 不必要地加载或重新加载内容时，Safari 中的页面会闪烁白色

Question

我想知道当我在 Safari 中设计的网站上从一个页面导航到另一个页面时，可能会导致页面短暂闪烁白色(您可以看到网站 here )。除了有时会发生这种闪烁之外， Logo 和导航栏在应保持静态时也会重新加载(短暂淡入和淡出)。在 Firefox 中会发生这种情况，但在 Safari(大部分情况下)和 Chrome 中我偶尔会看到闪烁和重新加载。我正在使用此脚本在非移动设备上淡入内容 div(即导航栏下方的所有内容)，但这似乎不是罪魁祸首，因为我尝试注释掉脚本并仍然看到行为:

<script>

$(document).ready(function(){

    if ( screen.width <= 699 ) {
    } else {
         // your script
    document.getElementById('content').style.display = "none";
    $('#content').fadeIn(1000);
    }

});
</script>-->

我想知道我还能尝试什么来获得更平稳的过渡。以前可以正常使用，但现在由于某种原因不能使用了。我的互联网连接非常好。

感谢您的帮助，

尼克

Answer 1

我没有看到白色闪光，尽管我可以理解为什么会发生这种情况:您的页面正在加载 #content，然后您的 JavaScript 正在隐藏 #content，那么您的 JavaScript 正在使 #content 淡入。

$(document).ready(function(){

    if ( screen.width <= 699 ) {
    } else {
         // your script
    document.getElementById('content').style.display = "none";
    $('#content').fadeIn(1000);
    }

});

顺便说一下，

document.getElementById('content').style.display = "none";

...可以替换为...

$('#content').css('display', 'none');

...即"roughly equivalent" to .hide() ...

$('#content').hide();

...然后与下一行组合(称为链接)...

$('#content').hide().fadeIn(1000);

但这并不能解决白色闪烁问题。

那么为什么不尝试在 CSS 中默认隐藏 #content...

#content {
   display: none;
}

并且只需使用 JS 淡入即可...

$(document).ready(function(){

    if ( screen.width <= 699 ) {

    } else {
         // your script
        $('#content').fadeIn(1000);
    }

});

当然，如果我知道您到底想要实现什么目标，我就能提出更好的建议。

编辑:

CSS:

#content {
    display: none;
}

@media screen and (max-device-width: 699px) {
    #content {
        display: block; 
    }
}

JavaScript:

$(document).ready(function(){
    $('#content').fadeIn(1000);
});