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>

 
复制代码

 

四、解释代码

  1. 定义 useLazyLoad Hook

    • 使用 Vue 的 refonMountedonUnmounted 组合 API。
    • loadImage 函数处理图片的实际加载:当图片进入视窗时,设置图片的 src 属性,并停止观察该图片。
    • 使用 IntersectionObserver API 观察图片元素的可见性变化。
  2. 在组件中使用 Hook

    • 使用 ref 定义一个图片列表。
    • 调用 useLazyLoad 并传递图片的选择器(.lazy-load)。
    • 在模板中,使用 v-for 指令渲染图片列表,并使用 data-src 属性存储图片 URL,等待懒加载。
posted @   最小生成树  阅读(89)  评论(2编辑  收藏  举报
相关博文:
阅读排行:
· 一个费力不讨好的项目,让我损失了近一半的绩效!
· 清华大学推出第四讲使用 DeepSeek + DeepResearch 让科研像聊天一样简单!
· 实操Deepseek接入个人知识库
· CSnakes vs Python.NET:高效嵌入与灵活互通的跨语言方案对比
· Plotly.NET 一个为 .NET 打造的强大开源交互式图表库
点击右上角即可分享
微信分享提示