本文解决 bootstrap 折叠组件（collapse）中 ngl 3d 查看器需双击才生效的问题，核心方案是延迟初始化 stage 实例，确保 dom 元素已完全展开并渲染完毕。
在使用 Bootstrap 的 .collapse 类实现“点击展开 + 加载 3D 视图”交互时，常见问题在于：用户首次点击“Show 3D”，折叠区域开始展开动画，但此时 <div id="viewport_0"> 尚未完成渲染（仍处于 display: none 或尺寸为 0 的过渡状态），导致 NGL.Stage 初始化失败或渲染异常——表现为无响应、白屏或需二次点击才生效。
根本原因在于：NGL.Stage 构造函数依赖目标容器的实际宽高与可见性。若容器尚未完成 CSS 过渡、仍不可见或尺寸为 0，NGL 无法正确初始化 WebGL 上下文，进而导致 loadFile() 调用静默失败或视图不渲染。
✅ 正确解法不是等待“DOM 插入”，而是等待折叠动画结束且容器可测量。推荐使用 setTimeout 延迟执行初始化（配合 Bootstrap 的 shown.bs.collapse 事件更稳健）：
<script>
function showPDB(path, id) {
// 方案一：简单可靠（推荐初用）
setTimeout(() => {
const container = document.getElementById(id);
if (!container || container.offsetWidth === 0 || container.offsetHeight === 0) {
console.warn(`Container ${id} not yet ready. Retrying...`);
setTimeout(() => showPDB(path, id), 100); // 递归重试（可选增强）
return;
}
const stage = new NGL.Stage(id, { backgroundColor: 'white' });
stage.loadFile(path).then(function (o) {
o.addRepresentation("cartoon", { color: 'white' });
o.autoView();
}).catch(err => console.error("Failed to load PDB:", err));
}, 150); // 略长于 Bootstrap 默认 collapse 动画时长（350ms → 建议 ≥150ms）
}
</script>⚠️ 注意事项：
避免 0 延迟：setTimeout(fn, 0) 仅保证异步，不保证 DOM 已完成渲染，仍可能失败；
-
优先监听事件：生产环境建议改用 Bootstrap 提供的 shown.bs.collapse 事件，精准捕获展开完成时机：
document.getElementById('_show_0').addEventListener('click', function() { const targetId = 'show_0'; const viewportId = 'viewport_0'; const pdbPath = 'https://alphafold.ebi.ac.uk/files/AF-P08047-F1-model_v4.pdb'; // 确保只绑定一次 const collapseEl = document.getElementById(targetId); const shownHandler = () => { collapseEl.removeEventListener('shown.bs.collapse', shownHandler); showPDB(pdbPath, viewportId); }; collapseEl.addEventListener('shown.bs.collapse', shownHandler); }); 资源预加载优化：对关键 PDB 文件，可在页面加载时预取（<link rel="prefetch">），减少点击后等待时间；
错误兜底：务必添加 .catch() 处理网络或格式错误，避免静默失败。
总结：单击即生效的关键，在于将 NGL 初始化逻辑推迟至折叠容器真实可渲染之后。setTimeout 是快速验证方案，而 shown.bs.collapse 事件是更健壮、语义清晰的工程实践。二者均能彻底解决“双击才能加载”的体验缺陷。
