What is data-fouc-class-names = "fast download"?

Question

I noticed the following at the top of the Twitter source code:

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

A quick Google search includes several other sites that use this too, but I could not find anything that describes what it is for. Implementing it in the markup of such a popular website (several times for loading due to conditional HTML classes ) should make it useful for something.

I am familiar with the concept of “flash free content”, also known as “FOUC”, but I'm curious about what this code specifically refers to.

Answer 1

If you look at line 38-40, you will get

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

What changes the class of a document element to include the value set in this attribute.

This allows css to hide "Flash of Unstyled Content" as a loadable page and javascript.

Later, scripts remove this class to load a fully loaded page.

It also seems to be used in the ajax page's loading code, allowing content to load hidden and only appear after all content has been loaded.

Attributes starting with the name data- are part of the html 5 specification and are private data. They are designed so that web pages can store information on a web page without violating HTML5 validation.

Answer 2

I noticed that it was added only for IE8 on some sites. I believe that it is added to determine the name of the fouc class for IE.

Fouc (flash of jagged content) is just a ghost display, some page flickers in Win IE, and this happens when you import the css style.

Thus, they can add this class to possible fouc objects and use this class name to work only on those objects within the solution.

Here you can check out fouc: http://www.bluerobot.com/web/css/fouc.asp/

Learn more here. How to prevent Flash content from appearing on your websites