3 ms·

Is that to avoid the FOUC?

• chrismorgan 6y ago
  Typically, yes. But I just want to be clear on this reason: it’s a fundamentally bad technique that slows things down and harms accessibility, both of which are far more important than your website potentially appearing slightly imperfectly while it loads, like just >99.4% of websites. (And if you’re doing something that means that your page looks worse than most while loading, you’re probably loading your resources in the wrong way somehow, e.g. putting a critical stylesheet at the end of the document rather than in the head.) Other reasons for doing this are: • A splash screen sort of experience. Yeah, there are still some around doing this, though it’s fortunately uncommon. It’s often a precursor to this second reason: • A misguided desire to animate things into place at the right time (kind of an extension of the FOUC, I guess). Gratuitous animating-in of content as you scroll, which this meshes with, is a horrible thing to do, by the way: although it’s decidedly popular on homepages, most people dislike it (ranging from mild displeasure to rage-quitting the site), because it’s distracting, slows things down and adds nothing. Just don’t do it. In short, I see no legitimate reason to ever set document opacity to zero or to put a loading spinner on top of everything else, in CSS. (In JavaScript, maybe—there are defensible reasons; but never in CSS.)