什么是 FOUC(无样式内容闪烁)?你如何来避免 FOUC?

来源:互联网 发布:网络调研问卷 编辑:程序博客网 时间:2024/05/18 01:40
FOUC - Flash Of Unstyled Content 文档样式闪烁
原因有:
1、使用@import方法导入CSS时,例如:
 <style type="text/css" media="all">@import "../fouc.css";</style>
此方式由于IE会先加载整个HTML文档的DOM,然后再去导入外部的CSS文件,因此,在页面DOM加载完成到CSS导入完成中间会有一段时间页面上的内容是没有样式的,这段时间的长短跟网速,电脑速度都有关系。
2、将样式表链接放在页面不同位置时,在IE5/6下某些页面会无样式显示内容且瞬间闪烁,这现象就是文档样式短暂失效(Flash Of Unstyled Content),即FOUC。
解决方法:避免使用@import方法导入CSS,且将样式表链接都放在head中即可避免此问题。

0 0
原创粉丝点击