使用 IntersectionObserver 监视元素进入可视区域
export default {
// vue2 inserted vue3 mounted
inserted(el) {
const imgSrc = el.src
el.src = ''
// 观察者
const obServer = new IntersectionObserver(([{ isIntersecting }]) => {
// 元素出现在可视区域,和离开可视区域被触发
if (isIntersecting) {
// 加载图片
el.src = imgSrc
// 停止观察
obServer.unobserve(el)
}
})
obServer.observe(el)
}
}
main.js注册
import lazy from "./directives/lazy"
Vue.directive('lazy', lazy)
页面使用
<img v-lazy src="https://www.runoob.com/wp-content/uploads/2013/07/pic_html5.gif" />