封装全局指令img-lazy
js
// 定义懒加载插件
import { useIntersectionObserver } from '@vueuse/core'
export const lazyPlugin = {
install (app) {
// 懒加载指令逻辑
app.directive('img-lazy', {
mounted (el, binding) {
// el: 指令绑定的那个元素 img
// binding: binding.value 指令等于号后面绑定的表达式的值 图片url
console.log(el, binding.value)
const { stop } = useIntersectionObserver(
el,
([{ isIntersecting }]) => {
console.log(isIntersecting)
if (isIntersecting) {
// 进入视口区域
el.src = binding.value
stop()
}
},
)
}
})
}
}
注册全局指令
js
// 全局指令注册
import {lazyPlugin} from "@/directives";
app.use(lazyPlugin)
重构HomeHot.vue,从而实现懒加载效果,提高页面加载性能
html
<ul class="goods-list">
<li v-for="item in hotList" :key="item.id">
<RouterLink to="/">
<img v-img-lazy="item.picture" alt="">
<p class="name">{{ item.title }}</p>
<p class="desc">{{ item.alt }}</p>
</RouterLink>
</li>
</ul>
有一点需要说明:IntersectionObserver
是异步库,这样即使目标元素一开始就在视口中,回调函数的执行也会在解构赋值之后,这样能够确保stop
方法在回调函数中调用时已经被正确解构。