使用react，Intersection
vers API，实现一个图片懒加载
```jsx
import React, { useEffect, useRef } from "react";
import { intersectionObserver } from "./intersectionObserver";
export const LazyImage = ({ src, alt }) => {
const imageRef = useRef(null);
useEffect(() => {
let observer;
if (imageRef.current) {
observer = intersectionObserver(imageRef.current, () => {
// 加载图片的地址替换占位符的地址，并显示图片。
imageRef.current.src = src; // 替换占位符的地址
imageRef.current.classList.remove("lazy"); // 显示图片
observer && observer.unobserve(imageRef); // 停止监听该元素，避免重复加载。
});
}
return () => observer && observer.disconnect(); // 组件卸载时，释放监听对象。
}, [src]); // 监听 src 变化。
return <img ref={imageRef} className="lazy" data-src={src} alt={alt} />;
}; // 初始时使用 lazy 类隐藏图片，并添加 data-src 属性存储真实地址。 // 该属性可以隐式传递真实地址到 IntersectionObservers API中去监听该元素是否出现了可视区域中去。 // 若出现则执行 callback （动态加载图片） , 避免不必要的浪费带宽下行流量
AI智能问答网免责声明：
以上内容除特别注明外均来源于网友提问、ChatGPT回答，权益归原著者所有，本站仅作效果演示和欣赏之用；
若以上展示有冒犯或侵害到您，敬请联系我们进行删除处理，谢谢！