修改現有 DOM 元素時消除頁面載入事件期間的閃爍

Question

我使用普通 JavaScript 有以下 DOM 元素更改函數，其中我使用頁面加載事件更改包含 DOM 的某些文字字串的 span 元素。

使用以下程式碼，DOM 元素將按預期更改。但是，在變數 desktop 和 mobile 的 DOM 元素更改之前，他們仍然會看到最小部分的閃爍。

閃爍�%B

Answer 1

它閃爍的原因有很多，但您可以採取兩個預防措施：

• 在腳本標籤 <script defer> 上使用 defer，因為這可以讓瀏覽器處理腳本的執行順序，而不是使用 DOMContentLoaded。您還可以避免 changes 包裝函數。
• 按照這個問題的建議（以及您自己�

Answer 2

無論如何，您都需要等到 DOM 載入完畢後才能對其進行操作。使用 DOMContentLoaded 的偶數偵聽器將是可行的方法。因此，需要發生三件事：

1. 等待 DOM 載入
2. 尋找元素並更改文字
3. 使元素可見。您可以使用屬性 visibility:hidden 或 display:none。不同之處在於%