既存の DOM 要素を変更する際のページ読み込みイベント中のちらつきを排除します。

Question

プレーンな JavaScript を使用した次の DOM 要素変更関数があります。この関数では、ページ読み込みイベントを使用して、DOM のテキスト文字列を含む Span 要素を変更します。

次のコードでは、DOM 要素が期待どおりに変更されます。ただし、変数 desktop と mobile では、DOM 要素が変更される前に、ちらつきの 最小部分 が表示されます。

フラッシュフィールド%E

Answer 1

ちらつく理由はたくさんありますが、予防策が 2 つあります。

• スクリプト タグ <script defer> で defer を使用します。これにより、ブラウザは DOMContentLoaded を使用する代わりにスクリプトの実行順序を処理できるようになります。 changes ラッパー関数を回避することもできます。
• この質問の提案に従ってください (およびあなた自身の提案

Answer 2

いずれの場合も、DOM を操作するには、DOM がロードされるまで待つ必要があります。 DOMContentLoaded で偶数リスナーを使用するのが最善の方法です。したがって、次の 3 つのことが起こる必要があります:

1. DOM のロードを待機中
2. 要素を検索してテキストを変更する
3. 要素を表示します。プロパティ visibility:hidden または display:none を使用できます。違いは、