图片懒加载封装自定义全局指令

图片懒加载

背景
电商类网站，图片会非常的多，而如果一上来就加载所有的图片，会导致网页加载很慢。
图片懒加载：等图片正式进入到可视区中时，才加载对应的图片，否则不请求图片
如何知道图片进入或者离开了可视区？
通过vueuse封装的useIntersectionObserver
写法：

const { stop } = useIntersectionObserver(target,  回调函数)
当target可见状态变化时，回调函数

例子：

import { useIntersectionObserver } from "@vueuse/core";
// const {stop} = useIntersectionObserver(要监听的dom,([{isIntersecting}])=>{
// 回调函数：当isIntersecting变化时：从可见->不可见 不可见->可见
// isIntersecting：当前可见
// })
// stop:停止监听
const imgRef = ref(null);
onMounted(() => {
  const { stop } = useIntersectionObserver(imgRef.value,([{ isIntersecting }]) => {
    console.log('是否进入',isIntersecting);
  });
  // setTimeout(()=>{
  // console.log('停止监视');
  // stop()
  // },5000)
});

带入图片：

const imgRef = ref<null|HTMLImageElement>(null); //ref用于获取页面中元素时，有两个状态：1. 初始转态 Null2. 绑定后的状态
onMounted(() => {
  const { stop } = useIntersectionObserver(imgRef.value,([{ isIntersecting }]) => {
    console.log('是否进入',isIntersecting);
    if(isIntersecting){
    // imgRef.value?.src='https://yanxuan-item.nosdn.127.net/79f289a4e975fd030d5c37b98b9282c5.jpg'
    if(imgRef.value){
      imgRef.value.src='https://yanxuan-item.nosdn.127.net/79f289a4e975fd030d5c37b98b9282c5.jpg'
      // 停止监听
      stop()
    }
    }
  });
});

图片懒加载-封装自定义指令

自己封装指令 v-lazy，实现图片懒加载

1. 创建一个自定义指令文件directives下的index.ts

// 自定义指令
// 自定义全局指令
import { App } from 'vue';
import { useIntersectionObserver } from '@vueuse/core';

export default {
  install(app: App) {
    // 自定义全局指令
    app.directive('lazy', {
      // mounted是v3中自定义 指令的生命周期，它会被自动调用
      // 它表示的涵义和组件的mounted是一致的
      // el是dom元素，binding
      mounted(el, binding) {
        console.log('lazy', el, binding.value);
        // 实时监听el是否可见 如果可见 给他的src 设置 binding.value
        const { stop } = useIntersectionObserver(el, ([{ isIntersecting }]) => {
          if (isIntersecting) {
            el.src = binding.value
            // 停止
            stop()
          }
        });
      }
    })
  }
}

2. 在main.ts注册

import directives from './directives/index'
app.use(directives)

3. 使用
   

图片懒加载理解思路