通过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>