【Vue】图片懒加载的实现
封装全局指令img-lazy
// 定义懒加载插件
import { useIntersectionObserver } from '@vueuse/core'export const lazyPlugin = {install (app) {// 懒加载指令逻辑app.directive('img-lazy', {mounted (el, binding) {// el: 指令绑定的那个元素 img// binding: binding.value 指令等于号后面绑定的表达式的值 图片urlconsole.log(el, binding.value)const { stop } = useIntersectionObserver(el,([{ isIntersecting }]) => {console.log(isIntersecting)if (isIntersecting) {// 进入视口区域el.src = binding.valuestop()}},)}})}
}
注册全局指令
// 全局指令注册
import {lazyPlugin} from "@/directives";
app.use(lazyPlugin)
重构HomeHot.vue,从而实现懒加载效果,提高页面加载性能
<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方法在回调函数中调用时已经被正确解构。