CSS 消除无样式内容的闪光

Question

提问by CMS Critic

How do I stop the flash of unstyled content (FOUC) on a web page?

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

Answer 1

采纳答案by álvaro Durán

What I've done to avoid FOUC is:

我为避免 FOUC 所做的工作是：

Set the body section as: <body style="visibility: hidden;" onload="js_Load()">
Write a js_Load()JavaScript function: document.body.style.visibility='visible';

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

With this approach the body of my web page is kept hidden until the full page and CSS files are loaded. Once everything is loaded, the onload event turns the body visible. So, the web browser remains empty until a point when everything pops up on the screen.

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

It is a simple solution but so far it is working.

这是一个简单的解决方案，但到目前为止它是有效的。

Answer 2

回答by Stefan

The problem with using a css style to initially hide some page elements, and then using javascript to change the style back to visible after page load, is that people who don't have javascript enabled will never get to see those elements. So it's a solution which does not degrade gracefully.

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

A better way therefore, is to use javascript to both initially hide as well as redisplay those elements after page load. Using jQuery, we might be tempted to do something like this:

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

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

However, if your page is very big with a lot of elements, then this code won't be applied soon enough (the document body won't be ready soon enough) and you might still see a FOUC. However, there is one element that we CAN hide as soon as script is encountered in the head, even before the document is ready: the HTML tag. So we could do something like this:

但是，如果您的页面非常大且包含很多元素，则不会很快应用此代码（文档正文不会很快准备好），您可能仍会看到 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>

Note that the jQuery addClass() method is called *outside* of the .ready() (or better, .on('load')) method.

请注意，jQuery addClass() 方法被称为 .ready()（或更好，.on('load')）方法的 *outside*。

Answer 3

回答by Adam Zerner

A CSS-only solution:

仅 CSS 的解决方案：

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

As the browser parses through the HTML file:

当浏览器解析 HTML 文件时：

The first thing it will do is hide <html>.
The last thing it will do is load the styles, and then display all the content with styling applied.

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

The advantage to this over a solution that uses JavaScript is that it will work for users even if they have JavaScript disabled.

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

Note: you are allowedto put <link>inside of <body>. I do see it as a downside though, because it violates common practice. It would be nice if there was a deferattribute for <link>like there is for <script>, because that would allow us to put it in the <head>and still accomplish our goal.

注意：您要允许放<link>里面<body>。不过，我确实认为这是一个缺点，因为它违反了惯例。如果有一个defer属性 for<link>就像for那样会很好<script>，因为这将使我们能够将其放入<head>并仍然实现我们的目标。

Answer 4

回答by Jeff

This is the one that has worked for me and does not require javascript and it works great for pages with many elements and lots of css:

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

First, add a dedicated <STYLE>setting for the <HTML>tag with visibility 'hidden' and opacity as '0' at the top of your HTML, e.g, in the beginning of the <HEAD>element, for example, at the top of your HTML add:

首先，增加一个专门<STYLE>设置的<HTML>，在你的HTML，如顶部，能见度“隐藏”和不透明度为“0”的标签，在年初<HEAD>元素，例如，在你的HTML加顶：

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

Then, at the end of your last .css stylesheet file, set the visibility and opacity styles to 'visible' and '1', respectively:

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

html {
    visibility: visible;
    opacity: 1;
}

If you already have an existing style block for the 'html' tag, then move the entire 'html' style to the end of the last .css file and add the 'visibility' and 'opacity' tags as described above.

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

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

Answer 5

回答by Lawrence Dol

A solution which doesn't depend on jQuery, which will work on all current browsers and do nothing on old browsers, include the following in your head tag:

一个不依赖于 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>

Thanks to @justastudent, I tried just setting elm.style.display="none";and it appears to work as desired, at least in current Firefox Quantum. So here is a more compact solution, being, so far, the simplest thing I've found that works.

感谢@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 6

回答by Paul Cream

An other quick fix which also works in Firefox Quantum is an empty <script>tag in the <head>. This however, penalizes your pagespeed insights and overall load time.

另一速战速决也可以在Firefox量子是一个空<script>的标签<head>。但是，这会影响您的页面速度洞察力和整体加载时间。

I had 100% success with it. I think it's also the main reason, why above solutions with other JS in the works.

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

<script type="text/javascript">

</script>

Answer 7

回答by danidee

No one has talked about CSS @import

没有人谈过 CSS @import

That was the problem for me i was loading two extra style sheets directly in my css file with @import

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

Simple solution: Replace all @importlinks with <link />

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

Answer 8

回答by Jake Boomgaarden

I came up with a way that requires no real code change whatsoever, woohoo! My issue was related to importing several css files AFTER some javascript files.

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

To resolve the issue I just moved my CSS links so that they would be above my javascript imports. This allowed all my CSS to be imported and ready to go ASAP, so that when the HTML appears on the screen, even if the JS isn't ready, the page will be properly formatted

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

Answer 9

回答by Coding_snakeZ

Here is my code .. hope it solve your problem

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

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

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

Answer 10

回答by Nagibaba

The best solution I found till now is like this:

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

Add all styles of your header to a <style/>tag in <head/>
at the top of style tag add .not-visible-first{visibility: hidden}+ other header style
Add css via JS at the end of body
document.getElementsByTagName("head")[0].insertAdjacentHTML("beforeend","<link rel=\"stylesheet\" href=\"/css/main.min.css?v=1.2.4338\" />");
And remember to add .not-visible-first{visibility: visible}to the end of main.min.css

将标题的所有样式添加到<style/>标签中<head/>
在样式标签的顶部添加.not-visible-first{visibility: hidden}+ 其他标题样式
在 body 末尾通过 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

This option will create better user experience

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

CSS 消除无样式内容的闪光

提问by CMS Critic

采纳答案by álvaro Durán

回答by Stefan

回答by Adam Zerner

回答by Jeff

回答by Lawrence Dol

回答by Paul Cream

回答by danidee

回答by Jake Boomgaarden

回答by Coding_snakeZ

回答by Nagibaba

相关推荐

最近更新

标签

CSS 消除无样式内容的闪光

提问by CMS Critic

采纳答案by álvaro Durán

回答by Stefan

回答by Adam Zerner

回答by Jeff

回答by Lawrence Dol

回答by Paul Cream

回答by danidee

回答by Jake Boomgaarden

回答by Coding_snakeZ

回答by Nagibaba

相关推荐

CSS 过滤器：模糊（1px）；不适用于 Firefox、Internet Explorer 和 Opera

CSS 如何让 textarea 填充 div 块？

是否可以使用 css 使背景图像“淡化”或将底部渐变为透明，以便显示背景颜色？

CSS auto 在 margin:0 auto 中做什么？

相关推荐

最近更新

标签