エンジニアのひよこ_level10

【毎日更新!】新卒3年目エンジニアブログです!

【JavaScript】画面を表示したら、一瞬描画途中の要素が見えてしまう【892日目】

画面を描写した瞬間、ごちゃごちゃ動いてる

ページを表示する時に、画面に一瞬要素の一部だけが表示されて、
その後完全な形が表示されることがある。

これは、HTMLの描写が終わった後にJavaScriptでHTMLを書き換えたりしているため。

かといって、JavaScriptをただ先に読み込ませても、対象となるHTMLのDOMがなくてJavaScriptが動かない。
さてどうしたものか。

3つ程対応が考えられます

1. ロード画面を用意する。

2020/03/23時点での、以下のサイトはロード画面があります。

www.temperance-st.com

このロード画面を見せることによって、JavaScriptによって制御中の裏の表示を隠し、
初期表示のJavaScriptの動作が終わった後、完成品を見せることによって対応は可能です。

2. 非表示後、表示させる

1.のロード画面と同じ理屈です。

最初はHTML要素を全てCSSなどで display:noneしておき、
初期表示の処理が終了後、JavaScriptで非表示を解除する。

3. 最初に見える画面は操作しない

縦長のページの場合、最初に見える画面上部には、表示に関わるJavaScriptを仕込まない。

そして、画面下部や特定の操作後に見える部分に対してはJavaScriptを仕込む。
これにより、最初の瞬間は正しく見えており、その裏ではJavaScriptを走らせていることによって、正しく表示させやすい。

もちろん、読み込み中に画面操作された場合にはこの限りではないです。