什么是data-fouc-class-name=“快速加载”？

Question

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

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

在谷歌上快速搜索一下，就会发现其他一些网站也在使用它，但我找不到任何描述它的用途的东西。将它加入到如此流行的网站的标记中(由于使用了conditional HTML classes而多次启动)，一定会让它变得有用。

我很熟悉"flash of unstyled content“的概念，也就是"FOUC”，但我很好奇这段代码具体涉及到什么。

Answer 1

如果你看一下38-40行，你会得到

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

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

这允许css在页面和javascripts加载时隐藏“未设置样式的内容的Flash”。

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

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

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

Answer 2

我注意到它只在一些站点的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