Bootstrap折叠加载NGL分子方法解析

根本原因在于：Bootstrap 的 collapse 切换是异步的（含 CSS 过渡），而 showPDB() 在点击瞬间立即执行，此时目标容器尚未被浏览器布局引擎确认为可见、可渲染的 DOM 节点。

✅ 正确解法不是简单加 setTimeout（如答案中未设延迟值的空 setTimeout 仅推入微任务队列，无法保证 DOM 更新完成），而是应监听 Bootstrap 提供的 原生事件钩子，在折叠内容完全显示后触发 NGL 初始化。

✅ 推荐方案：使用 Bootstrap 的 shown.bs.collapse 事件

将 showPDB 调用解耦，改为监听 #show_0 展开完成事件，并传入参数：

<div class="row">
  <div class="col" data-toggle="collapse" data-target="#show_0" id="_show_0">
    <b>Show 3D</b>
  </div>
</div>

<div id="show_0" class="collapse">
  <div class="row">
    <div class="col">
      <div id="viewport_0" style="width:100%; height:800px;"></div>
    </div>
  </div>
</div>

<script>
// 定义加载函数（不立即执行）
function showPDB(path, containerId) {
  // 确保容器存在且可见
  const container = document.getElementById(containerId);
  if (!container || getComputedStyle(container).display === 'none') {
    console.warn(`Container #${containerId} not ready yet.`);
    return;
  }

  const stage = new NGL.Stage(containerId, { backgroundColor: 'white' });
  stage.loadFile(path).then(function (o) {
    o.addRepresentation("cartoon", { color: 'white' });
    o.autoView();
  }).catch(err => console.error("Failed to load PDB:", err));
}

// 监听展开完成事件（推荐！）
document.getElementById('show_0').addEventListener('shown.bs.collapse', function () {
  showPDB('https://alphafold.ebi.ac.uk/files/AF-P08047-F1-model_v4.pdb', 'viewport_0');
});
</script>

⚠️ 注意事项

• 不要依赖 onclick 行内调用 + setTimeout：未指定毫秒数的 setTimeout(fn) 默认延迟 0ms，仅进入宏任务队列，无法保证 DOM 重排（reflow）完成；而 shown.bs.collapse 是 Bootstrap 在 transitionend 后精确触发的真实完成信号。
• 确保 NGL 脚本加载完成： 应置于 前或使用 defer，避免 NGL.Stage 未定义错误。
• 添加错误处理：如示例所示，.catch() 捕获网络或格式错误，便于调试。
• 响应式优化：若容器尺寸动态变化（如窗口缩放），建议调用 stage.handleResize() 或监听 window.resize。

✅ 总结

单次点击即加载的关键，在于将 NGL 初始化逻辑与 Bootstrap 折叠生命周期对齐。使用 shown.bs.collapse 事件替代行内 onclick 调用，既符合前端事件驱动最佳实践，又彻底规避竞态条件，确保 3D 查看器在 DOM 可见、尺寸稳定后精准启动。

理论要掌握，实操不能落！以上关于《Bootstrap折叠加载NGL分子方法解析》的详细介绍，大家都掌握了吧！如果想要继续提升自己的能力，那么就来关注golang学习网公众号吧！