Question

我想知道当我在Safari中设计的网站上从一个页面导航到页面时，可能导致页面短暂闪烁的原因（您可以看到网站here）。除了有时会发生这种闪烁之外，当它们保持静止时，徽标和导航栏也会重新加载（淡入淡出）。在Firefox中，这是发生的事情，但在Safari（大多数）和Chrome偶尔会看到闪烁和重新加载。我正在使用这个脚本淡化非移动设备上的内容div（即导航栏下方的所有内容），但这似乎不是罪魁祸首，因为我已经尝试评论出脚本并仍然看到行为：< / p>

<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正在制作{{1}淡出。

#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";

...这是"roughly equivalent" to .hide() ...

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

...然后结合下一行（称为链接）......

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

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

那么为什么不尝试在CSS中默认隐藏$('#content').hide().fadeIn(1000); ...

#content

只需使用JS将其淡化...

#content {
   display: none;
}

当然，如果我知道你想要达到的目的是什么，我就能做出更好的推荐。

修改

CSS：

$(document).ready(function(){ if ( screen.width <= 699 ) { } else { // your script $('#content').fadeIn(1000); } });

JavaScript的：

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

Answer 2

你正在渲染它，隐藏它，你也混合了js选择和jquery选择，为什么不用css来隐藏它。

//css
 #content {display:none;}
// use media query for css detect mobile
@media only screen and (max-device-width: 480px) {
#content {display:block;}
}

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

});

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

2 个答案: