如何修复 Chrome 中加载动画后内容不显示的问题

作者：袖梨 2026-08-17

本文详解因 JavaScript 拼写错误和未定义变量导致的跨浏览器兼容性问题，重点修复 document.getElementById 拼写错误及 dump 变量误用，确保加载指示器（loader）在 Chrome 和 Firefox 中行为一致。

本文详解因 JavaScript 拼写错误和未定义变量导致的跨浏览器兼容性问题，重点修复 `document.getElementById` 拼写错误及 `dump` 变量误用，确保加载指示器（loader）在 Chrome 和 Firefox 中行为一致。

在构建大型家谱树这类需异步渲染大量 DOM 节点的应用时，良好的用户体验依赖于可靠的加载状态反馈——即：页面加载中显示动态 loader（如生长中的树形图），加载完成后再平滑切换至真实家谱结构。您当前的实现逻辑合理，但在 Chrome 中白屏的根本原因并非浏览器内核差异，而是两处关键 JavaScript 错误：

拼写错误：ocument.getElementById('tree') 应为 document.getElementById('tree')（漏掉 d）；
未定义变量：函数中使用了未声明的 dump，实际应为 tree —— 这导致 Chrome 在执行 dump.hidden = false 时抛出 ReferenceError，后续代码中断，#tree 始终保持隐藏，最终呈现为空白页。Firefox 虽可能对某些错误更宽容，但不应依赖此行为。

正确的修复版本如下：

<body onload="show();"><div id="loader"><img src="loader-tree.gif"/></div><div id="tree" class="hidden"><!-- 家谱树 HTML 内容（初始隐藏） --></div></body>

.hidden {display: none;}

function show() {const loader = document.getElementById('loader');const tree = document.getElementById('tree');if (!loader || !tree) {console.error('Required elements #loader or #tree not found.');return;}// 隐藏 loader，显示 treeloader.hidden = true;tree.hidden = false;tree.style.display = 'block'; // 显式恢复 display，兼容旧 CSS 规则}

额外建议与注意事项：

使用 const/let 替代 var，避免变量提升带来的潜在问题；
添加元素存在性校验（如示例中的 if (!loader || !tree)），提升健壮性；
推荐改用现代事件监听方式替代内联 onload，例如在 <script> 末尾添加：
```
document.addEventListener('DOMContentLoaded', show);
```
这能确保 DOM 就绪后执行，比 window.onload（等待所有资源）更及时，也更符合语义；
若家谱数据需通过 AJAX/Fetch 加载，应将 show() 调用移至数据渲染完成后的回调中，而非仅依赖 onload——因为 onload 仅表示 HTML 加载完毕，并不保证动态生成的树结构已就绪。