什么是 data-fouc-class-names="swift-loading"？答案

【问题标题】：What is data-fouc-class-names="swift-loading"?什么是 data-fouc-class-names="swift-loading"？
【发布时间】：2013-09-22 22:29:19
【问题描述】：

我注意到 Twitter 源代码顶部附近的以下内容：

data-fouc-class-names="swift-loading"

快速的 Google 搜索会发现一些其他网站也使用此功能，但我找不到任何描述其用途的内容。让它成为如此受欢迎的网站的标记（由于conditional HTML classes 被使用而多次启动）必须使它对某些东西有用。

我熟悉“flash of unstyled content”又名“FOUC”的概念，但我很好奇这段代码具体与什么相关。

【问题讨论】：

我注意到它仅在某些站点中为 IE8 添加。

标签： twitter fouc

【解决方案1】：

我注意到它仅在某些站点中为 IE8 添加。我相信添加它是为了为 IE 定义 fouc 类名。

Fouc（无样式内容的闪烁）只是一种显示怪癖，是 Win IE 中的某种页面闪烁，当您导入 css 样式时会发生这种情况。

因此他们可能会将该类添加到可能的 fouc 对象中，并使用该类名称来仅影响解决方案中的那些对象。

你可以在这里测试一个 fouc：http://www.bluerobot.com/web/css/fouc.asp/

你可以在这里找到更多How to prevent Flash of Unstyled Content on your websites

【讨论】：

【解决方案2】：

如果您查看第 38-40 行，您会得到

<script id="swift_loading_indicator">
   document.documentElement.className=document.documentElement.className+" "+document.documentElement.getAttribute("data-fouc-class-names");
</script>

这会更改文档元素类以包含此属性中设置的值。

这允许 css 在页面和 javascripts 加载时隐藏“Flash Of Unstyled Content”。

稍后脚本会删除此类以允许加载完全加载的页面。

它似乎也被用在 ajax 页面加载代码中，以允许隐藏加载内容，并且仅在加载所有内容后才显示。

以名称 data- 开头的属性是 html 5 规范的一部分，代表私有数据。它们允许网页在网页中存储信息，而不会破坏通过 HTML5 验证器进行的验证

【讨论】：