图片懒加载-介绍
目标：了解如何实现数据懒加载
电商类网站，图片会非常的多，而如果一上来就加载所有的图片，会导致网页加载很慢。
图片懒加载：等图片正式进入到可视区中时，才加载对应的图片，否则不请求图片
问题
如何知道图片进入或者离开了可视区？
- 通过vueuse封装的useIntersectionObserver
核心代码：
（1）useIntersectionObserver的基本使用
<script lang="ts" setup> import { useIntersectionObserver } from '@vueuse/core' import { ref } from 'vue' const target = ref<HTMLImageElement | null>(null) // stop停止监听 const { stop } = useIntersectionObserver(target, ([{ isIntersecting }]) => { console.log('执行了') console.log(isIntersecting) if (isIntersecting) { target.value!.src = 'https://yanxuan-item.nosdn.127.net/79f289a4e975fd030d5c37b98b9282c5.jpg' stop() } }) </script> <template> <div style="height: 3000px"></div> <img ref="target" alt="" /> </template> <style scoed lang="less"></style>
图片懒加载-封装自定义指令
目标：自己封装指令 v-lazy，实现图片懒加载
新建 directives/index.ts
核心代码
import { App } from 'vue' import Skeleton from './Skeleton/index.vue' import Slider from './Slider/index.vue' import More from './More/index.vue' import { useIntersectionObserver } from '@vueuse/core' import defaultImg from '@/assets/images/200.png' export default { install(app: App) { // 全局注册组件 app.component('Skeleton', Skeleton) app.component('Slider', Slider) app.component('More', More) // 自定义指令 // <img :src="item.src" alt="" /> // <img v-lazy="item.src" alt="" /> app.directive('lazy', { mounted(el: HTMLImageElement, { value }) { // 图片的懒加载逻辑 // 参数1：回调函数 // 参数2：可选的配置 const { stop } = useIntersectionObserver(el, ([{ isIntersecting }]) => { if (isIntersecting) { // 停止监听 stop() // 给el元素设置src属性 // value = '123.jpg' el.src = value // 如果图片加载失败，显示默认的图片 el.onerror = function () { el.src = defaultImg } } }) } }) } }
