Vue Hook 封装图片懒加载通用业务
一、什么是图片懒加载
图片懒加载(Lazy Loading)是一种在用户需要的时候(通常是滚动到可视区域)才加载图片的技术。通过这种方式,可以减少页面的初始加载时间,减少带宽消耗,提高用户体验。
二、Vue中使用Intersection Observer实现图片懒加载
Intersection Observer 是一个现代浏览器提供的API,用于异步观察目标元素与其祖先元素或视窗(viewport)交叉状态的变化。我们可以利用这个API来实现图片的懒加载。
三、封装一个通用的图片懒加载 Hook
首先,我们创建一个自定义的 Vue Hook,用于实现图片懒加载功能。
1. 创建 useLazyLoad
Hook
在 src/hooks
目录下创建一个 useLazyLoad.js
文件:
import { ref, onMounted, onUnmounted } from 'vue'; export function useLazyLoad(imageSelector) { const images = ref([]); const loadImage = (entries, observer) => { entries.forEach(entry => { if (entry.isIntersecting) { const img = entry.target; img.src = img.dataset.src; observer.unobserve(img); } }); }; const observer = new IntersectionObserver(loadImage, { root: null, rootMargin: '0px', threshold: 0.1, }); onMounted(() => { images.value = document.querySelectorAll(imageSelector); images.value.forEach(img => { observer.observe(img); }); }); onUnmounted(() => { if (images.value.length) { images.value.forEach(img => { observer.unobserve(img); }); } }); return { images, }; }
2. 使用 useLazyLoad
Hook
组件中使用这个 Hook 来实现图片懒加载。
<template>
<div>
<img v-for="(image, index) in imageList" :key="index" :data-src="image.src" class="lazy-load" alt="Image"/>
</div>
</template>
<script>
import { ref } from 'vue';
import { useLazyLoad } from '@/hooks/useLazyLoad';
export default {
setup() {
const imageList = ref([
{ src: 'https://via.placeholder.com/600x400?text=Image+1' },
{ src: 'https://via.placeholder.com/600x400?text=Image+2' },
{ src: 'https://via.placeholder.com/600x400?text=Image+3' },
// 更多图片...
]);
useLazyLoad('.lazy-load');
return {
imageList,
};
},
};
</script>
<style>
/* 可以添加一些样式,比如占位图等 */
.lazy-load {
width: 100%;
height: auto;
opacity: 0;
transition: opacity 0.3s;
}
.lazy-load[src] {
opacity: 1;
}
</style>
四、解释代码
-
定义
useLazyLoad
Hook:- 使用 Vue 的
ref
、onMounted
和onUnmounted
组合 API。 loadImage
函数处理图片的实际加载:当图片进入视窗时,设置图片的src
属性,并停止观察该图片。- 使用
IntersectionObserver
API 观察图片元素的可见性变化。
- 使用 Vue 的
-
在组件中使用 Hook:
- 使用
ref
定义一个图片列表。 - 调用
useLazyLoad
并传递图片的选择器(.lazy-load
)。 - 在模板中,使用
v-for
指令渲染图片列表,并使用data-src
属性存储图片 URL,等待懒加载。
- 使用
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 一个费力不讨好的项目,让我损失了近一半的绩效!
· 清华大学推出第四讲使用 DeepSeek + DeepResearch 让科研像聊天一样简单!
· 实操Deepseek接入个人知识库
· CSnakes vs Python.NET:高效嵌入与灵活互通的跨语言方案对比
· Plotly.NET 一个为 .NET 打造的强大开源交互式图表库