画面を描写した瞬間、ごちゃごちゃ動いてる
ページを表示する時に、画面に一瞬要素の一部だけが表示されて、
その後完全な形が表示されることがある。
これは、HTMLの描写が終わった後にJavaScriptでHTMLを書き換えたりしているため。
かといって、JavaScriptをただ先に読み込ませても、対象となるHTMLのDOMがなくてJavaScriptが動かない。
さてどうしたものか。
3つ程対応が考えられます
1. ロード画面を用意する。
2020/03/23時点での、以下のサイトはロード画面があります。
このロード画面を見せることによって、JavaScriptによって制御中の裏の表示を隠し、
初期表示のJavaScriptの動作が終わった後、完成品を見せることによって対応は可能です。
2. 非表示後、表示させる
1.のロード画面と同じ理屈です。
最初はHTML要素を全てCSSなどで display:noneしておき、
初期表示の処理が終了後、JavaScriptで非表示を解除する。
3. 最初に見える画面は操作しない
縦長のページの場合、最初に見える画面上部には、表示に関わるJavaScriptを仕込まない。
そして、画面下部や特定の操作後に見える部分に対してはJavaScriptを仕込む。
これにより、最初の瞬間は正しく見えており、その裏ではJavaScriptを走らせていることによって、正しく表示させやすい。
もちろん、読み込み中に画面操作された場合にはこの限りではないです。
