加载或重新加载不必要的内容时页面在 Safari 中闪烁答案

【问题标题】：Pages flashing white in Safari on loading or reloading content unnecessarily加载或重新加载不必要的内容时页面在 Safari 中闪烁
【发布时间】：2012-01-20 18:20:35
【问题描述】：

我想知道当我在 Safari 中设计的网站上从一个页面导航到另一个页面时，可能导致页面短暂闪烁白色的原因（您可以查看网站 here）。除了有时会发生这种闪烁之外，当徽标和导航栏应该保持静止时，它们也会重新加载（短暂淡入和淡出）。在 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>-->

我想知道我还能尝试什么来实现更顺畅的过渡。它以前工作得很好，但现在不知道为什么。我有很好的互联网连接。

感谢您的帮助，

尼克

【问题讨论】：

虽然我认为代码很草率，我不知道你究竟想通过使用它来实现什么，但我没有看到你在使用 Safari 时描述的问题。
您是否启用了浏览器缓存？也许图像和某些文件没有缓存在浏览器中，这可能会导致其中一些问题。我之所以提到这一点，是因为我在 Safari、FireFox 或 Chrome 中没有发现问题。
我没用过，你能use HTML transitions吗？例如。像素渐变 (12)
谢谢两位。很高兴知道您最终没有看到任何问题。缓存已启用。
没关系。调查了一下，据我所知，HTML 转换看起来是旧的扩展/黑客。

标签： jquery google-chrome safari flicker pageload

【解决方案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);
});

【讨论】：

我只是想保持徽标和导航栏静态，并淡入每个页面的主要内容，以便页面之间的过渡更顺畅。使用您描述的方法时（没有手机的条件语句），除了徽标和导航栏外，我没有在手机上看到任何内容。所以我切换到一个全 jQuery 方法。我可以切换回去并将条件 cmets 放在显示器上：用于手机的无 CSS。如果这是最好的方法，你能告诉我如何为 CSS 编写条件语句吗？谢谢
@Nick，您不能真正拥有“静态”徽标和导航栏，只能更改下面的内容。每个链接加载一个完全不同的页面。它有时看起来是静态的原因是由于现代浏览器内置的缓存。如果失败，您会在新文件加载时看到白色闪烁。恕我直言，您正在增加不必要的复杂性。移动浏览器力求像桌面浏览器一样，因此为桌面设计一个可靠的网站，它应该在移动浏览器上看起来很棒。否则，专用的移动网站和应用程序可以让您在小屏幕上更轻松地访问您的内容。
谢谢，我已经实施了你的建议。我仍然有白色闪烁，主要是在主页上，有时是关于页面，但从来没有在工作和工作子页面上，使用 Safari。我会密切注意这一点。感谢您的帮助。
.hide() 与$('#content').css('display', 'none'); 不完全相同。 .hide() 还保存 display 的先前值，以便在调用 .show() 时恢复。
@MarkWilden，根据the jQuery documentation，它"大致相当于调用.css('display', 'none')"。我已经更新了我的答案。但也许您可以解释究竟在哪里这个先前的值被保存了。 AFAIK，您无需“保存”任何内容，只需将 display 从 none 切换到 block 并再次返回。

【解决方案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);

});

【讨论】：