Question

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

只是想知道她身上是否有人知道快速修复jquery或其他什么来阻止它。

我知道把那些不是内联的CSS作为不好的做法，但我想知道是否有工作回合。

任何帮助表示赞赏

Answer 1

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

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

$(function() { $("#some-div").show(); });

Answer 2

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

＆＃13;

$(function() {
  $('.no-fouc').removeClass('no-fouc');
  $('#dialog').dialog();
});

＆＃13;

.no-fouc {
  display: none;
}

＆＃13;

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

＆＃13;

Answer 3

修复不需要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

如何阻止无格式内容的闪现

3 个答案: