图片懒加载指令实现

一、适用场景

       在电商网站的首页通常会很长，用户不一定能访问到页面靠下面的图片，这类图片就可以通过懒加载优化手段做到——只有进入视口区域才发送图片请求

二、指令用法

<img v-img-lazy="item.picture">

在图片img身上绑定指令，该图片只有在正式进入到视口区域时才会发送图片网络请求。这个图片就变成了懒加载的图片

三、实现思路和步骤

核心原理：图片进入视口才发送资源请求

熟悉指令用法→判断图片是否进入视口（vueUse）→测试图片监控是否生效→如果图片进入视口，发送图片资源请求（img.src=url）→测试图片资源是否发出

1.在main.js写入一下代码，定义全局指令

import { createApp } from 'vue'
import App from './App.vue'

const app = createApp(App)
// 定义全局指令
app.directive('img-lazy',{
    mounted(el,binding){
        // el——指令绑定的那个元素，img
        // binding——binding.value ，指令等于号后面绑定表达式的值，图片url
        console.log(el,binding.value);
    }
})

2.测试一下，看能否打印出来图片地址（给img加上v-img-lazy指令）

<img v-img-lazy="item.picture" :src="item.picture" alt="" />

看consle结果，证明测试通过

3.查阅vueUse官网。了解useIntersectionObserver（检测目标元素的可见性）的用法

const { stop } = useIntersectionObserver(
  target,
  ([{ isIntersecting }], observerElement) => {
    targetIsVisible.value = isIntersecting
  },
)

第一个参数target是指要监听谁进入到视口区域，就传过来，在本次例子中就是指el

第二个参数是一个回调函数，其中isIntersecting是一个布尔值，告诉我们当前监听的对象是否进入到视口区域

然后再main.js补充一下代码，最后进行测试

//查阅vueUse官网，了解useIntersectionObserver的用法

import { useIntersectionObserver } from '@vueuse/core'

app.directive('img-lazy',{
    mounted(el,binding){
        // el——指令绑定的那个元素，img
        // binding——binding.value ，指令等于号后面绑定表达式的值，图片url
        console.log(el,binding.value);
        const { stop } = useIntersectionObserver(
            // 第一个参数target,想要监听谁就写谁
            el,
            ([{ isIntersecting }]) => {
                console.log(isIntersecting)
            },
        )
    }
})

 测试结果只有在滑动到指定区域才是true

4. 判断是否要发送图片资源请求（img.src=url），继续在main.js补充代码

// 定义全局指令
app.directive('img-lazy',{
    mounted(el,binding){
        // el——指令绑定的那个元素，img
        // binding——binding.value ，指令等于号后面绑定表达式的值，图片url
        console.log(el,binding.value);
        const { stop } = useIntersectionObserver(
            // 第一个参数target,想要监听谁就写谁
            el,
            ([{ isIntersecting }]) => {
                console.log(isIntersecting)
                if (isIntersecting){
                    // 进入视口区域
                    el.src = binding.value
                }
            },
        )
    }
})

然后进行测试，发现只有在到达指定视口区域，才会发送图片请求，测试通过

四、懒加载指令优化 

1.逻辑书写位置不合理

通过插件的方法把懒加载指令封装为插件，main.js文件只需要负责注册插件

首先在src下新建一个directives文件夹，新建index.js文件，写入以下代码

import { useIntersectionObserver } from '@vueuse/core'
// 定义懒加载插件
export const lazyPiugin = {
    install(app){
        // 懒加载指令逻辑
        // 定义全局指令
        app.directive('img-lazy', {
            mounted(el, binding) {
                // el——指令绑定的那个元素，img
                // binding——binding.value ，指令等于号后面绑定表达式的值，图片url
                console.log(el, binding.value);
                const { stop } = useIntersectionObserver(
                    // 第一个参数target,想要监听谁就写谁
                    el,
                    ([{ isIntersecting }]) => {
                        console.log(isIntersecting)
                        if (isIntersecting) {
                            // 进入视口区域
                            el.src = binding.value
                        }
                    },
                )
            }
        })
    }
}

把main.js关于懒加载的代码全部删掉， 写入以下代码

// 引入懒加载指令插件并且注册
import { lazyPiugin } from '@/directives'

const app = createApp(App)
app.use(lazyPiugin)

2.重复监听问题

useIntersectionObserver对于元素的监听是一直存在的，除非手动停止监听，所以存在内存浪费。那我们就要在监听的图片第一次完成加载之后就要停止监听

 在刚刚directives文件夹下的index.js文件补充以下代码

stop()

补充之后的完整代码：

import { useIntersectionObserver } from '@vueuse/core'
// 定义懒加载插件
export const lazyPiugin = {
    install(app){
        // 懒加载指令逻辑
        // 定义全局指令
        app.directive('img-lazy', {
            mounted(el, binding) {
                // el——指令绑定的那个元素，img
                // binding——binding.value ，指令等于号后面绑定表达式的值，图片url
                console.log(el, binding.value);
                const { stop } = useIntersectionObserver(
                    // 第一个参数target,想要监听谁就写谁
                    el,
                    ([{ isIntersecting }]) => {
                        console.log(isIntersecting)
                        if (isIntersecting) {
                            // 进入视口区域
                            el.src = binding.value
                            stop()
                        }
                    },
                )
            }
        })
    }
}

通过控制台可以发现，无论怎么滑动页面，只会出现一次false和true