表示遅延の解消

処理が重たい場合、AngularJSをすべて読み込む途中で、HTMLが表示されてしまう場合があります。その解決方法の紹介です。

<body ng-cloak>
				
@charset "utf-8";
[ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak {
  display: none !important;
}
				

重要なポイント

  • ng-cloak
  • class="ng-cloak"

ロード中に表示してほしくない箇所に[ng-cloak]をつけます。につけると 全体的に有効になります。IE7などセレクタが対応していない場合、[class="ng-cloak"]を利用します。