图片懒加载组件（react实现）

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

const LazyImage = ({ src, alt }) => {
  const imageRef = useRef();

  useEffect(() => {
    const options = {
      root: null,
      threshold: 0.1,
    };

    const observer = new IntersectionObserver((entries) => {
      entries.forEach((entry) => {
        if (entry.isIntersecting) {
          const image = entry.target;
          image.src = image.dataset.src;
          observer.unobserve(image);
        }
      });
    }, options);

    observer.observe(imageRef.current);

    return () => {
      observer.disconnect();
    };
  }, []);

  return <img ref={imageRef} data-src={src} alt={alt} />;
};

export default LazyImage;