ResizeObserver
ResizeObserver是监听DOM元素宽高的变化,需要注意的一点就是监听出变化结果是contentBox的宽度和高度
const resizeObserver = new ResizeObserver((entries) => {
// dosomething
console.log('Size changed')
})
onMounted(() => {
// 开始监听 当dom contentBox 尺寸发生变化时 触发上面的回调
resizeObserver.observe(document.querySelector('.demo'))
})
用于监听元素大小的变化
IntersectionObserver
IntersectionObserver 是监听DOM元素是否可见
const intersectionObserver = new IntersectionObserver((entries) => {
// 如果 intersectionRatio 为 0,则目标在视野外,
if (entries[0].intersectionRatio <= 0) return
// dosomething
})
onMounted(() => {
// 开始监听 当dom的可见状态发生变化时,触发 上面的回调
intersectionObserver.observe(...document.querySelector('.demo'))
})
用于图片懒加载