Vue实现图片懒加载

51 阅读1分钟
export default {
    mounted(el) {
        console.log(el)
        const url = el.src;
        // 监听器
        const observe = new IntersectionObserver(([{isIntersecting}]) => {
            el.src = "";
            // 依靠isIntersecting属性判断是否出现
            if (isIntersecting) {
                el.src = url;
                // 取消监听 避免多次刷新
                observe.unobserve(el)
            }
        })
        observe.observe(el)
    },
}