Question

如何在网页上停止无格式内容（FOUC）的闪现？

Answer 1

使用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'））方法的* *之外调用。

Answer 2

一个不依赖于jQuery的解决方案，它可以在所有当前浏览器上运行，在旧浏览器上不执行任何操作，在头标记中包含以下内容：

<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>

Answer 3

仅限CSS的解决方案：

var temp = new string[] {"http://google.com", "http://www.google.com", "http://gmail.com", "https://www.gmail.com", "https://example.com"};

var urlWithoutWWW = temp.Where(d => 
                         d.IndexOf("http://www") == -1 && d.IndexOf("https://www") == -1);

foreach (var newurl in urlWithoutWWW)
{
     Console.WriteLine(newurl.Replace("://", "://www."));
}

当浏览器解析HTML文件时：

首先要隐藏<html> <head> <style> html { display: none; } </style> ... </head> <body> ... <link rel="stylesheet" href="app.css">  </body> </html>。
它要做的最后一件事是加载样式，然后显示所有应用了样式的内容。

与使用JavaScript的解决方案相比，它的优势在于，即使禁用了JavaScript，它也能为用户使用。

注意：您allowed将<html>置于<link>内。我确实认为这是一个缺点，因为它违反了惯例。如果[{1}}的{{3}}属性与<body>类似，那就太好了，因为这样我们就可以将它放在<link>中并仍然可以实现我们的目标

Answer 4

另一个也适用于Firefox Quantum的快速修补程序是<script>中的空<head>标记。但是，这会影响您的网页速度和整体加载时间。

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

<script type="text/javascript">

</script>

Answer 5

这是对我有用的，不需要javascript，它非常适合包含许多元素和大量CSS的页面：

首先，为<STYLE>标签添加专用的<HTML>设置，在HTML的顶部（例如，{{1 }}元素，例如 HTML顶部的：

<HEAD>

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

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

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

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

Answer 6

我为避免FOUC所做的是：

将正文部分设置为：<body style="visibility: hidden;" onload="js_Load()">
撰写js_Load() JavaScript函数：document.body.style.visibility='visible';

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

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

Answer 7

我想出了一种方法，不需要任何真正的代码更改，呜呼！我的问题与一些JavaScript文件之后导入多个CSS文件有关。

要解决此问题，我刚刚移动了CSS链接，以使它们位于我的javascript导入上方。这样就可以导入我所有的CSS并准备好尽快运行，以便在HTML出现在屏幕上时，即使JS还没有准备好，页面也会被正确格式化

Answer 8

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

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

<script>
    $(document).ready(function() {
        $("body").css('opacity', 1);
    });
</script>

Answer 9

一个简单的解决方案，可以在没有 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>

当解析器到达正文时，它使用“opacity: 0”淡出。当解析器在解析完其他所有内容后最终到达最底部时，正文将再次使用页内样式淡入。 !important 关键字很重要 ;-)，因为它推翻了 body 标签之前的内联样式。

在这种情况下，使用 "opacity: 0" 淡出比使用 "display: none" 更好，因为如果您通过 javascript 完成布局操作，当受影响的元素未呈现时，它们可能无法工作。

这对我有用。

Answer 10

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

将标题的所有样式添加到<style/>

<head/>

在样式标签的顶部添加.not-visible-first{visibility: hidden} +其他标题样式
在主体末尾通过JS添加CSS

document.getElementsByTagName("head")[0].insertAdjacentHTML("beforeend","<link rel=\"stylesheet\" href=\"/css/main.min.css?v=1.2.4338\" />");
并记住将.not-visible-first{visibility: visible}添加到main.min.css

此选项将提供更好的用户体验

Answer 11

您可以尝试香草

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>

Answer 12

我知道的最简单的方法是隐藏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

Answer 13

许多解决方案都提供加载页面onLoad（）。这种方法的问题是，如果用户未启用Javascript。

对我来说，简便的解决方案是： 1.在样式表链接加载之前，将HTML隐藏在您的HTML文件中

<head>
  <style> html { display: none; } </style>
  <link rel="stylesheet" href="myStylesheet.css" /> 
</head>

2。在样式表的开头再次显示html

// first line in myStylesheet.css

html {
  display: block;
}

您可以在我的文章https://www.nnsoftware.at/blog/avoiding-flash-of-unstyled-content中看到更多详细信息：

消除无格式内容的闪现

13 个答案: