当前位置：首页 > article >正文

react和vue图片懒加载及实现原理

article 2024/11/26 21:35:11

一、实现原理

核心思想：
- 只有当图片出现在视口中时，才加载图片。
- 利用占位图或占位背景优化用户体验。
实现技术：
- 监听滚动事件：监听页面滚动，通过计算图片与视口的位置关系，判断是否需要加载图片。
- Intersection Observer（推荐）：现代浏览器提供的 API，用于检测目标元素是否进入视口，比滚动事件性能更好。
步骤：
- 设置图片的占位符（如灰色背景、默认图片）。
- 检测图片元素是否进入视口。
- 当图片进入视口时，将 src 属性替换为实际图片地址。

二、React 实现图片懒加载

1. 使用 `Intersection Observer` 实现

import React, { useRef, useState, useEffect } from 'react';

const LazyImage = ({ src, alt, placeholder, className }) => {
  const [isLoaded, setIsLoaded] = useState(false);
  const imgRef = useRef();

  useEffect(() => {
    const observer = new IntersectionObserver(
      ([entry]) => {
        if (entry.isIntersecting) {
          setIsLoaded(true);
          observer.disconnect(); // 图片加载后停止观察
        }
      },
      { threshold: 0.1 } // 10% 进入视口时触发
    );

    if (imgRef.current) {
      observer.observe(imgRef.current);
    }

    return () => {
      if (observer && imgRef.current) {
        observer.unobserve(imgRef.current);
      }
    };
  }, []);

  return (
    <img
      ref={imgRef}
      src={isLoaded ? src : placeholder}
      alt={alt}
      className={className}
    />
  );
};

export default LazyImage;

2. 第三方库

react-lazyload：轻量级懒加载库，支持图片、组件等。

npm install react-lazyload

import React from 'react';
import LazyLoad from 'react-lazyload';

const LazyImage = ({ src, alt, height }) => (
  <LazyLoad height={height} offset={100}>
    <img src={src} alt={alt} />
  </LazyLoad>
);

export default LazyImage;

三、Vue 实现图片懒加载

1. 使用 `Intersection Observer`

<template>
  <img
    :src="isLoaded ? src : placeholder"
    :alt="alt"
    ref="imageRef"
    class="lazy-image"
  />
</template>

<script>
export default {
  props: {
    src: String,
    placeholder: String,
    alt: String,
  },
  data() {
    return {
      isLoaded: false,
    };
  },
  mounted() {
    const observer = new IntersectionObserver(
      ([entry]) => {
        if (entry.isIntersecting) {
          this.isLoaded = true;
          observer.disconnect();
        }
      },
      { threshold: 0.1 }
    );

    observer.observe(this.$refs.imageRef);
  },
};
</script>

2. 使用指令（全局注册）

懒加载在 Vue 中可通过自定义指令实现：

// directive-lazyload.js
export const lazyload = {
  mounted(el, binding) {
    const loadImage = () => {
      const imageElement = el;
      if (imageElement) {
        imageElement.src = binding.value;
      }
    };

    const observer = new IntersectionObserver(([entry]) => {
      if (entry.isIntersecting) {
        loadImage();
        observer.disconnect();
      }
    });

    observer.observe(el);
  },
};

注册全局指令：

import { lazyload } from './directive-lazyload';
const app = createApp(App);
app.directive('lazyload', lazyload);

使用

<template>
  <img v-lazyload="imageSrc" alt="Lazy loaded image" />
</template>

<script>
export default {
  data() {
    return {
      imageSrc: 'https://example.com/image.jpg',
    };
  },
};
</script>

3. 第三方库

vue-lazyload：

npm install vue-lazyload

import VueLazyload from 'vue-lazyload';
app.use(VueLazyload, {
  loading: 'path/to/loading-image.png', // 占位图
  error: 'path/to/error-image.png',   // 错误图
});

<template>
  <img v-lazy="imageSrc" alt="Lazy loaded image" />
</template>