Skip to content

Instantly share code, notes, and snippets.

@minwe
Forked from johnpolacek/gist:3827270
Created April 6, 2016 08:25
Show Gist options
  • Save minwe/4f3918669869fb5cea3c13e4e53e0f9f to your computer and use it in GitHub Desktop.
Save minwe/4f3918669869fb5cea3c13e4e53e0f9f to your computer and use it in GitHub Desktop.
Prevent FOUC
<!-- Prevent FOUC (flash of unstyled content) - http://johnpolacek.com/2012/10/03/help-prevent-fouc/ -->
<style type="text/css">
.no-fouc {display: none;}
</style>
<script type="text/javascript">
document.documentElement.className = 'no-fouc';
// add to document ready: $('.no-fouc').removeClass('no-fouc');
</script>
@minwe
Copy link
Author

minwe commented Apr 6, 2016

什么是 FOUC (文档样式短暂失效)?

如果使用 import 引入 CSS,会导致某些页面在 Windows Internet Explorer 出现一些奇怪的现象:无样式显示页面内容的瞬间闪烁(Flash of Unstyled Content),简称为 FOUC。

原因大致为:

  • 使用import方法导入样式表。
  • 将样式表放在页面底部
  • 有几个样式表,放在html结构的不同位置。

其实原理:当样式表晚于结构性 HTML 加载,当加载到此样式表时,页面将停止之前的渲染。此样式表被下载和解析后,将重新渲染页面,也就出现了短暂的花屏现象。

解决方法:

  • 不要使用 import
  • 将样式表使用 link 标签放在 head 中。

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment