页面过渡 - 避免“闪烁”的方法答案

【问题标题】：Page Transitioning - Ways to Avoid the "flicker"页面过渡 - 避免“闪烁”的方法
【发布时间】：2019-09-10 18:16:41
【问题描述】：

我想知道是否有办法避免“闪烁”或用某种其他类型的过渡代替它？如果需要，我不介意使用 JavaScript 或 jQuery - 这也只是指从一个网页到另一个网页的转换（都在同一个站点上）。

谢谢大家！

【问题讨论】：

“从一页到另一页”是什么意思？您是在谈论您自己网站中的不同 URL 吗？或者在您的站点和另一个站点之间？您可以通过使用 Ajax 而不是实际的页面导航来对第一个做点什么，但对第二个您无能为力。
您是指不使用 ajax 时发生的闪烁，还是例如使用 ajax 将新内容加载到 div 时会出现闪烁？如果您不想重新加载页面，请使用 ajax。通过在单击处理程序中执行的第一件事将一些内容淡出，使其变得漂亮，当内容从服务器到达时淡入。
抱歉，我应该更准确一点 - 我指的是页面本身之间的转换（在我的网站上）。
见Flash of Unstyled Content (FOUC)

【解决方案1】：

我相信您可以使用 jQuery 来通过类似的方式处理转换：

<script type="text/javascript">
    $(document).ready(function() {
        $("body").css("display", "none");
        $("body").fadeIn(2000);
    });
</script>

Here is a tutorial regarding using jQuery for Page Transitions

您还可以在 HTML 的标题部分使用以下行：（仅限 IE）

<meta http-equiv="Page-Enter" content="progid:DXImageTransform.Microsoft.Fade(Duration=2)">
<meta http-equiv="Page-Exit" content="progid:DXImageTransform.Microsoft.Fade(Duration=2)">

如果您只想消除“闪烁”，我建议您使用较短的持续时间 (

【讨论】：

你应该把 jquery 页面转换放在 ie only 页面转换之前。没有人喜欢只针对一个浏览器的解决方案。
没问题 - 我会解决的 :) 谢谢
不能为我解决闪烁问题；在 Firefox 和 Chrome 中，都会看到一闪而过的内容，然后突然消失，然后又淡入。这比 FOUC 更烦人，远远并且每一个内容都增加了 2 秒的加载时间页。我怎么强调你不应该这样做。
@meagar，你指的是哪一个？ IE 一还是 jQuery 一？（我个人只用过 IE - 但是找到了 jQuery 方法的教程）
@Rion jQuery 版本。 $(document).ready 的明确目的是延迟代码的执行，直到 DOM 可用。对于大多数浏览器，在 <body> 上设置 display:none 样式时，它就会可见，从而导致这种烦人的出现/消失/淡入效果。

【解决方案2】：

我遇到了同样的问题。上面的代码有效，只是在css中的HTML上放了一个背景色。似乎对我有用

【讨论】：

【解决方案3】：

您无法真正消除闪烁，但可以软化它，尽管它确实增加了过渡时间。

// Put this in your navigation function
$("body").fadeOut(200,function(){window.location = filename);

// Make sure the body tag of the next page is hidden by default
<body style='display:none'>

// Then after loading the new page, fade it in
$(document).ready(function() {
  $("body").fadeIn(200);
});

它消除了闪烁，但在我看来，这同样糟糕，因为它显着减慢了页面加载速度，并向用户显示白屏的时间比闪烁要长得多。由你决定。

【讨论】：