bodyの中のlinkタグでロードされるCSSファイルによる一瞬画面変化を避ける方法

方法

ロードする間表示用ページを用意します。 styleタグの中のコードでローディングデザインを出す。ロードされるCSSの中でローディングデザインを隠す。

index.html

<!doctype html/>
<html>
<head>
  <meta charset="utf-8" />
  <style>
    .loading {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: gray;
    }
</style>
</head>
<body>
  <style>
    .loading {
      display: block;
    }
  </style>
  <link rel="stylesheet" href="style.css">
  <div class="loading">
    Loading...
  </div>
  <div class="content">
    Content
  </div>
</body>
</html>

style.css

.loading {
  display: none !important;
}