MutationObserver的使用

阿鲁冶夫2023-09-19 16:16

通过MutationObserver的方式监听是否有DOM元素插入。当vue渲染页面后会对<div id="app"></div>重新挂载。这时要观察的目标节点内会有节点挂载，此时隐藏骨架屏。

js 复制代码

<svg id="skeletonViewBase"></svg>
<div id="app"></div>
<script>
const skeleton_view_base = document.querySelector('#skeletonViewBase')
const observers = new MutationObserver((mutationsList, observer) => {
  // 遍历每个发生变化的 mutation
  for (const mutation of mutationsList) {
    // 检查是否有节点添加
    if (mutation.type === 'childList' && mutation.addedNodes.length > 0) {
      // 遍历新添加的节点
      mutation.addedNodes.forEach((node) => {
        if (node.classList) {
          skeleton_view_base && skeleton_view_base.remove()
          observer.disconnect()
        }
      })
    }
  }
})
// 要观察的目标节点
const targetNode = document.querySelector('#app')
// 配置 MutationObserver 来监听子节点的添加
const config = {
  childList: true, // 监听子节点的添加或移除
  subtree: true // 在整个 DOM 树中观察更改
}
// 开始观察
observers.observe(targetNode, config)
</script>