Web関連

pace.js使用時にページが完全に読み込まれるまで画面を表示しない方法

ページローディング表示のpace.jsを使っているものの、ローディング表示中に画面の内容が五月雨式に表示されてしまい、やはり、こんな風に画面が表示されるのは中途半端なので、対処しました。

image

当初は、回避させるスクリプトを書けばよいのかと思っていたものの、pace.js自体で回避できるだろうと思いなおし、paceのGitHubのイシューをあたりました。結構同じことで困っている人がいるようで、3つくらい見つかりました。
https://github.com/HubSpot/pace/issues/127
https://github.com/HubSpot/pace/issues/152
https://github.com/HubSpot/pace/issues/185

185の最後に記載されていた例で解決しました。

ページの表示時の動きをwebインスペクタで見ていると、pace.jsが実行されているときは、.pace-runningというクラスが、完了したときは.pace-doneというクラスができているので、pace-running中はページ全体をopacity:0にして、pace-doneでopacity:1にする、というやり方の模様。

他の読み込みよりも先に上記のスタイルを適用したいので、htmlファイルの中に<style>タグで記述しました。