93

如何停止网页上无样式内容 (FOUC) 的闪烁？

4

13 回答 13

87

使用 css 样式最初隐藏某些页面元素，然后在页面加载后使用 javascript 将样式更改回可见的问题在于，没有启用 javascript 的人将永远无法看到这些元素。所以这是一个不会优雅降级的解决方案。

因此，更好的方法是使用 javascript 在页面加载后最初隐藏和重新显示这些元素。使用 jQuery，我们可能会做这样的事情：

$(document).ready(function() {
    $('body').hide();
    $(window).on('load', function() {
        $('body').show();
    });
});

但是，如果您的页面非常大，包含很多元素，那么此代码将不会很快应用（文档正文不会很快准备好），您可能仍会看到 FOUC。但是，一旦在头部遇到脚本，甚至在文档准备好之前，我们就可以隐藏一个元素：HTML 标记。所以我们可以这样做：

<html>
  <head>
  <!-- Other stuff like title and meta tags go here -->
  <style type="text/css">
    .hidden {display:none;}
  </style>
  <script type="text/javascript" src="/scripts/jquery.js"></script>
  <script type="text/javascript">
    $('html').addClass('hidden');
    $(document).ready(function() {    // EDIT: From Adam Zerner's comment below: Rather use load: $(window).on('load', function () {...});
      $('html').show();  // EDIT: Can also use $('html').removeClass('hidden'); 
     });  
   </script>
   </head>
   <body>
   <!-- Body Content -->
   </body>
</html>

请注意，jQuery addClass() 方法在 .ready() （或更好的 .on('load')）方法的 *outside* 中调用。

于 2012-03-22T13:41:30.173 回答
45

这是对我有用且不需要 javascript 的一个，它适用于具有许多元素和大量 css 的页面：

首先，在 HTML 的顶部添加可见性“隐藏”和不透明度为“0”的标签的专用<STYLE>设置，例如，在元素<HTML>的开头，例如，在 HTML 的顶部添加：<HEAD>

<!doctype html>
<html>
<head>
    <style>html{visibility: hidden;opacity:0;}</style>

然后，在最后一个 .css 样式表文件的末尾，将可见性和不透明度样式分别设置为“可见”和“1”：

html {
    visibility: visible;
    opacity: 1;
}

如果您已经有 'html' 标记的现有样式块，则将整个 'html' 样式移动到最后一个 .css 文件的末尾，并如上所述添加 'visibility' 和 'opacity' 标记。

https://gist.github.com/electrotype/7960ddcc44bc4aea07a35603d1c41cb0

于 2018-11-18T19:23:17.560 回答
33

仅 CSS 的解决方案：

<html>
  <head>
    <style>
      html {
        display: none;
      }
    </style>
    ...
  </head>
  <body>
    ...
    <link rel="stylesheet" href="app.css"> <!-- should set html { display: block; } -->
  </body>
</html>

当浏览器解析 HTML 文件时：

  • 它会做的第一件事就是隐藏<html>。
  • 它要做的最后一件事是加载样式，然后显示应用了样式的所有内容。

与使用 JavaScript 的解决方案相比，这样做的优势在于，即使用户禁用了 JavaScript，它也可以为用户工作。

注意：您可以将<link>. <body>不过，我确实认为这是一个缺点，因为它违反了惯例。如果有一个defer属性 for <link>like there is for那就太好了<script>，因为这将允许我们将它放入<head>并仍然实现我们的目标。

于 2017-05-06T17:38:24.187 回答
17

一个不依赖于 jQuery 的解决方案，它适用于所有当前的浏览器并且在旧浏览器上什么也不做，在你的 head 标签中包含以下内容：

<head>
    ...

    <style type="text/css">
        .fouc-fix { display:none; }
    </style>
    <script type="text/javascript">
        try {
            var elm=document.getElementsByTagName("html")[0];
            var old=elm.class || "";
            elm.class=old+" fouc-fix";
            document.addEventListener("DOMContentLoaded",function(event) {
                elm.class=old;
                });
            }
        catch(thr) {
            }
    </script>
</head>

感谢@justastudent，我尝试了设置elm.style.display="none";，它似乎可以按预期工作，至少在当前的 Firefox Quantum 中是这样。所以这是一个更紧凑的解决方案，到目前为止，这是我发现的最简单的方法。

<script type="text/javascript">
    var elm=document.getElementsByTagName("html")[0];
    elm.style.display="none";
    document.addEventListener("DOMContentLoaded",function(event) { elm.style.display="block"; });
</script>
于 2014-02-10T03:16:10.370 回答
12

另一个同样适用于 Firefox Quantum 的快速修复<script>是<head>. 但是，这会损害您的页面速度洞察力和整体加载时间。

我取得了 100% 的成功。我认为这也是主要原因，为什么上述解决方案与其他 JS 在工作中。

<script type="text/javascript">

</script>
于 2017-11-17T10:16:46.253 回答
4

我为避免 FOUC 所做的是：

  • 将正文部分设置为：<body style="visibility: hidden;" onload="js_Load()">

  • 编写一个js_Load()JavaScript 函数：document.body.style.visibility='visible';

使用这种方法，我的网页正文会一直隐藏，直到加载完整页面和 CSS 文件。加载完所有内容后，onload 事件会使主体可见。因此，网络浏览器保持空白，直到屏幕上弹出所有内容。

这是一个简单的解决方案，但到目前为止它正在工作。

于 2011-05-12T19:23:10.270 回答
4

没有人谈论过 CSS@import

这对我来说是个问题，我直接在我的 css 文件中加载了两个额外的样式表@import

简单的解决方案：将所有@import链接替换为<link />

于 2017-05-12T14:57:59.737 回答
2

这是我的代码..希望它能解决您的问题

set <body style="opacity:0;">

<script>
    $(document).ready(function() {
        $("body").css('opacity', 1);
    });
</script>
于 2019-08-05T11:38:15.533 回答
1

我想出了一种不需要任何实际代码更改的方法，哇哦！我的问题与在一些 javascript 文件之后导入几个 css 文件有关。

为了解决这个问题，我只是移动了我的 CSS 链接，以便它们位于我的 javascript 导入之上。这允许我所有的 CSS 都被导入并准备好尽快运行，这样当 HTML 出现在屏幕上时，即使 JS 没有准备好，页面也会被正确格式化

于 2019-02-08T13:54:31.197 回答
1

在没有 javascript 的情况下避免出现无样式内容的简单解决方案：

<!DOCTYPE html>
<html>
<head>
    <title>Bla bla</title>
    <link href="..." rel="stylesheet" />
    <link href="..." rel="stylesheet" />
</head>
<body style="opacity: 0">
    <!-- All HTML content here -->
    <script src="..."></script>
    <script src="..."></script>
    <style>
        body {
            opacity: 1 !important;
        }
    </style>
</body>
</html>

当解析器到达正文时，它使用“不透明度：0”淡出。当解析器在解析完其他所有内容后最终到达最底部时，使用页内样式再次淡入正文。!important 关键字很重要 ;-)，因为它覆盖了 body 标记的先前内联样式。

在这种情况下，使用“opacity: 0”淡出比“display:none”更好，因为如果你有通过javascript完成的布局操作，当受影响的元素没有渲染时它们可能不起作用。

这对我有用。

于 2021-02-02T13:25:44.840 回答
0

到目前为止我找到的最佳解决方案是这样的：

  1. 将标题的所有样式添加到<style/>标签中<head/>

  2. 在样式标签顶部添加.not-visible-first{visibility: hidden}+其他标题样式

  3. 在正文末尾通过 JS 添加 css

    document.getElementsByTagName("head")[0].insertAdjacentHTML("beforeend","<link rel=\"stylesheet\" href=\"/css/main.min.css?v=1.2.4338\" />");

  4. 并记得添加.not-visible-first{visibility: visible}到末尾main.min.css

此选项将创造更好的用户体验

于 2019-10-07T13:13:11.773 回答
0

你可以用香草试试这个

function js_method(){
//todos
var elementDiv = document.getElementById("main");
elementDiv.style.display ="block";
}
<body onload="js_method()" id="main" style="display:none">
//todos
<h2>Hello</h2>
</body>

于 2019-11-06T09:16:02.777 回答
0

我知道的最简单的方法是隐藏 html 标记，然后在 javascript 文件的底部，淡入 html 标记。

HTML

<html style="display:none;">
    ...
</html>

Javascript

/*
 * FOUC Fix - Flash of Unstyled Content
 * By default, the <html> tag is hidden to prevent the flash of unstyled content.
 * This simple fadeIn() function will allow the page to gracefully fade in once 
 * all assets are loaded. This line of code must remain at the bottom of the js 
 * assets.
 */

$( 'html' ).fadeIn();

来源：https ://gist.github.com/marchershey/139db0e8fd6f03a83578698409d333ce

于 2020-03-28T01:54:11.993 回答