7

这只是一个简短的问题，我没有真正的示例，但我使用的是定制的 cms，目前我们无法访问网页的头部，因此必须将一些 css 放在头部之外，导致闪烁页面加载时未设置样式的内容。

只是想知道她身上是否有人知道用 jquery 快速修复或阻止这种情况。

我知道将 CSS 放在非内联是不好的做法，但我想知道是否有一个工作回合。

任何帮助表示赞赏

4

4 回答 4

12

处理 FOUC 的基本解决方案是将其隐藏起来，直到其样式正确。

我假设您可以控制无样式显示的内容？在这种情况下，将其包装在<div id="some-div" style="display:none">... content ... </div>. 然后在整个文档准备好时使用 jQuery 显示它：

$(function() { $("#some-div").show(); });
于 2012-07-24T22:33:16.583 回答
1

在名为 的内容中添加一个类，在公共 CSS 文件no-fouc中将类设置为display: none，然后在页面加载时删除该类。此解决方案的优点是它可以处理任意数量的元素，并且可以在所有页面上重复使用。

$(function() {
  $('.no-fouc').removeClass('no-fouc');
  $('#dialog').dialog();
});
.no-fouc {
  display: none;
}
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>

<div class="no-fouc">
  <div id="dialog" title="Basic dialog">
    <p>This is the default dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.</p>
  </div>
</div>

于 2017-11-21T15:37:43.530 回答
0

哟它只是倒退。

在您的页面上执行此操作

<style>
html{visibility: visible;opacity:1;}
</style>

对于最后一个 .css 文件，请执行此操作

/* no fouc */
html {
visibility: hidden;
opacity: 0;
transition: all 2s ease-in-out;
}
于 2022-01-20T17:59:12.453 回答
-1

修复不需要 javascript 的 FOUC：

在 HTML 的顶部：

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

在最后一个 .css 文件的末尾：

html {
     visibility: visible;
     opacity: 1; }

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

于 2018-11-18T19:26:52.877 回答