twitter – 什么是data-fouc-class-names =“swift-loading”？

2023年5月26日 301次阅读

我注意到Twitter的源代码顶部附近：

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

一个快速的谷歌搜索出现了一些其他使用它的网站,但我找不到任何描述它的用途.使它成为这样一个受欢迎的网站的标记(由于使用了conditional HTML classes,几次启动)必须使它对某些东西有用.

我熟悉“闪存无格式内容”的概念,又名“FOUC”,但我很好奇这段代码与具体内容有什么关系.

最佳答案 如果你看看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页面加载代码中使用,以允许内容加载隐藏,并且只在加载所有内容后才显示.

以名称数据开头的属性是html 5规范的一部分,代表私有数据.它们允许网页在网页中存储信息,而不会通过HTML5验证器中断验证

点赞