ウェブページを読み込んだ直後にJavaScriptでDOMを操作すると画面がちらつくことがあります。これはブラウザがHTMLとCSSに基づいて初期描画を行った後にJavaScriptでDOMの変更が行われ、どの変更後のDOMについて改めて描画が行われるためです。根本的な解決方法はサーバーサイドのレンダリングをより完璧にして読み込んだ直後のDOM操作を不要にすることです。しかしやんごとなき理由でそれをしない時やできない時もあります。そういった時に使えるちらつきを防ぐ方法を紹介します。
解決方法の方針はDOMの操作が完了しきるまで実質的な描画を送らせる、というものです。実際のコードが次です。
<head>
<style id="tmp-css">
html {
display: none;
}
</style>
<script>
document.addEventListener('DOMContentLoaded', () => {
try {
// 入力欄、選択欄をただの入力値のテキストにする
document.getElementById('project-form').querySelectorAll('input:not([type="hidden"]),select').forEach(el => {
if (el instanceof HTMLInputElement) {
el.outerHTML = el.value
} else if (el instanceof HTMLSelectElement) {
el.outerHTML = el.selectedOptions.item(0)?.textContent
}
});
} finally {
// 何かで画面が見えないままになると困るので finally で必ず表示させる
document.getElementById('tmp-css').remove();
}
})
</script>
</head>
HTML全体を非表示にするCSSを持った style 要素を用意して画面を非表示にし、DOMが読み込まれきったら JavaScript を実行して見た目を変え、変え終わったらHTML全体を非表示にするCSSを持った style 要素を除去する、といった具合です。こうすると一回描画され、JavaScriptでDOMが書き換わった後に再描画され画面がちらつく、といった事態を避けることができます。
