如何避免无样式内容闪烁(FOUC)?

什么是FOUC?

FOUC - Flash Of Unstyled Content 文档样式闪烁 即 文档样式短暂失效
若是使用 import 引入 css 文件会致使某些页面在IE下出现一些奇怪的现象:css

以无样式显示页面内容的瞬间闪烁

造成缘由

  1. 经过 @import 引入 css 样式html

    <style>
        @import "../fouc.css";
    </style>
  2. 样式表放在页面底部
  3. 有多个样式表,放在 html 不一样位置

原理:IE会先加载整个HTML文档的DOM,而后再去导入外部的CSS文件,所以,在页面DOM加载完成到CSS导入完成中间会有一段时间页面上的内容是没有样式的,这段时间的长短跟网速,电脑速度都有关系。code

解决方法:

在head里面加入一个link或者script标签htm

相关文章
相关标签/搜索