4

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

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

一个快速的谷歌搜索出现了一些使用它的其他网站，但我找不到任何描述它的用途的东西。使其成为如此受欢迎的网站的标记（由于使用了条件HTML类而多次启动）必须使其对某些东西有用。

我熟悉“无样式内容的闪存”又名“FOUC”的概念，但我很好奇这段代码具体与什么相关。

4

2 回答 2

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 验证器的验证

于 2013-11-04T15:17:43.583 回答
0

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

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

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

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

您可以在此处找到更多信息如何防止在您的网站上出现无样式内容的 Flash

于 2013-11-04T15:01:42.447 回答