前端如何实现图片懒加载-IntersectionObserver的使用

当使用IntersectionObserver时，你可以按照以下步骤进行操作：

1. 创建一个IntersectionObserver实例，指定一个回调函数和一些配置选项。
2. 将要观察的目标元素传递给IntersectionObserver实例的observe方法。
3. 在回调函数中处理目标元素与视窗或祖先元素的交叉状态变化。

以下是一个简单的示例，演示了如何使用IntersectionObserver来实现懒加载图片的功能：

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

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

    useEffect(() => {
        const observer = new IntersectionObserver((entries, observer) => {
            entries.forEach(entry => {
                //判断entry的对象是否正在与另一个元素相交
                if (entry.isIntersecting) {
                    //如果`entry`对象正在与另一个元素相交，则将图片的自定义属性的data-src的图片的真实地址赋值给src，然后进行图片加载渲染，从而实现图片懒加载
                    const img = entry.target;
                    img.src = img.dataset.src;
                    //从观察器中移除对图片元素的观察
                    observer.unobserve(img);
                }
            });
        },
            {
                //图片和视口相交达到10%
                threshold: 0.1
            }
        );

        if (imgRef.current) {
            // 则使用观察者对象 observer 来观察 imgRef.current 所引用的图片元素。
            observer.observe(imgRef.current);
        }

        return () => {
            if (imgRef.current) {
                //从观察器中移除对图片元素的观察
                observer.unobserve(imgRef.current);
            }
        };
    }, [src]);

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

export default LazyImage;

在这个示例中，我们创建了一个IntersectionObserver实例，指定了一个回调函数，当图片进入视口的10%时，会触发回调函数，将图片的data-src属性赋值给src属性，实现了图片的懒加载功能。