検索

ホームページ  >  に質問  >  本文

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

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

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

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

P粉143640496P粉143640496323日前558

全員に返信(2)返信します

  • P粉195402292

    P粉1954022922024-03-27 17:50:03

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

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

      返事
      0
  • P粉478188786

    P粉4781887862024-03-27 14:35:48

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

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

      返事
      0
  • キャンセル返事