`

FOUC 文档样式闪烁

 
阅读更多
FOUC--Flash Of Unstyled Content （文档样式闪烁）

http://www.bluerobot.com/web/css/fouc.asp/中是这么定义的：
What is a FOUC?
Some pages that use the CSS @import rule experience a curious display quirk in the Windows version of MS Internet Explorer: a momentary flash of unstyled page content.
简而言之，指当一些页面以 CSS @import 方式引用样式加载页面的时候，IE浏览器出现短暂样式失效。


http://zhangyaochun.iteye.com/blog/1701113这里有详细的说明。
Just one LINK element or SCRIPT element inside a document's HEAD element will prevent a flash of unstyled content.在head里面加入一个link或者script标签就可轻松解决啦~如下所示：

LINK element solution：页面head标签里面使用link标签 
<head>
<title>My Page</title>
<link rel="stylesheet" type="text/css" media="print" href="print.css">
<style type="text/css" media="screen">@import "style.css";</style>
</head>


SCRIPT element solution：页面head标签里面使用script标签 
<head>
<title>My Page</title>
<script type="text/javascript"> </script>
<style type="text/css" media="screen">@import "style.css";</style>
</head>
分享到：
| 原生Array.isArray()判断对象是否为数组
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    网页FOUC问题导致网页混乱的解决方法

    FOUC是“Flash of Unstyled Content”的缩写，直译为“未样式化的内容闪烁”。出现FOUC问题的主要原因通常是CSS文件的加载位置不正确或加载方式不当。 在深入讨论解决方案之前，先来详细分析一下可能造成FOUC现象的...

    将样式表放在页面顶部

    这样做是为了确保页面元素在呈现给用户之前能够拥有正确的样式，避免页面在加载过程中出现闪烁或不一致的情况。然而，如果样式表被放置在页面的底部（`&lt;body&gt;`标签结束附近），那么在样式表完全加载之前，浏览器已经...

    前端开源库-gulp-scriptcss

    通常，我们手动将`&lt;link&gt;`标签添加到HTML头部来引入CSS，但这种方式可能导致"FOUC"（Flash of Unstyled Content，无样式内容闪烁）问题，尤其是在进行异步加载或延迟加载时。gulp-scriptcss通过JavaScript动态插入...

    5月最新大厂前端高频核心面试题.pdf

    无样式内容闪烁（FOUC）指的是在网页加载过程中，因为CSS没有被即时加载，用户可能看到的是无样式的原始内容，这通常是因为CSS文件加载在HTML内容之后引起的。 在页面中放置CSS的标签于之间是为了确保在浏览器渲染...

    动态加载js、css的简单实现代码

    在当前的前端开发中，动态加载JavaScript和CSS文件是一项常用的技术，特别是...但是，过度的按需加载也可能会使页面出现白屏或无样式内容闪烁（FOUC）的问题。因此，在实际应用中需要根据具体情况权衡资源的加载方式。

Magicbox
Global site tag (gtag.js) - Google Analytics