页面加载时修改DOM元素如何避免出现闪烁问题？

核心思路 #

先通过CSS默认隐藏目标元素，避免页面加载时先显示原文本，等JavaScript完成文本修改后再将元素设为可见，从根源消除闪烁。同时优化原代码的逻辑错误和冗余操作。

步骤1：默认隐藏目标元素 #

推荐用内部样式表统一设置（比内联样式更易维护）：

<style>
.target-span {
  visibility: hidden;
}
</style>
<span class="first-headline target-span">Text I want to change</span>

也可以直接给span加内联样式：

<span class="first-headline target-span" style="visibility: hidden;">Text I want to change</span>

步骤2：优化JavaScript代码 #

修正原代码的拼写错误、冗余查询，同时加入显示逻辑：

var changesObj = {
  "us": {
    title: "text1 changed"
  },
  "eu": {
    title: "text2 changed"
  }
};

function changes() {
  const pathPrefix = window.location.pathname.split('/')[1];
  const webshop = changesObj[pathPrefix];
  // 设置默认文本，避免webshop不存在时报错
  let changesText = "Text I want to change";

  if (webshop) {
    changesText = webshop.title;
  } else {
    console.log('webshop not found');
  }

  // 只查询一次目标元素，减少DOM开销
  const targetSpan = document.querySelector('.target-span');
  if (targetSpan && targetSpan.innerText.length > 0) {
    targetSpan.innerText = changesText;
    // 修改完成后显示元素
    targetSpan.style.visibility = 'visible';
    console.log("文本修改完成并显示");
  }
}

// 简化代码，直接绑定DOM加载事件
document.addEventListener("DOMContentLoaded", changes);

关键优化点 #

• 修复原代码中第二个if里的拼写错误：lenght → length
• 只执行一次querySelector，避免重复DOM查询
• 添加默认文本，防止webshop不存在时访问webshop.title报错
• 合并桌面/移动端的重复操作（原代码两次修改同一个元素，完全冗余）
• 修改完成后统一设置元素可见，确保用户不会看到原文本

内容的提问来源于stack exchange，提问作者UgoL