加载图像后如何取消观察？

Question

我正在 lazy-load 我的图像。 view port 我正在加载我的 image.it 工作正常。我可以在查看时加载图像 port.But 我遇到一个问题。

当我松开视口时，我的图像是 gone 并返回它获取 again.so 我需要 unobserve 我的监听器。

这是我的代码 https://codesandbox.io/s/frosty-lovelace-yjfl9?file=/src/App.js

const Card = ({ src }) => {
  const target = useRef();
  const root = useRef();
  const [isThingIntersecting, setThingIntersecting] = useState(false);
  console.log("isThingIntersecting", isThingIntersecting);
  useIntersectionObserver({
    root,
    target,
    rootMargin: "0px",
    threshold: 0.02,
    // What do we do when it intersects?
    // The signature of this callback is (collectionOfIntersections, observerElement).
    onIntersect: ([{ isIntersecting }]) => setThingIntersecting(isIntersecting)
  });

  return (
    <img className={"img"} ref={target} src={isThingIntersecting ? src : ""} />
  );
};

这一行出现问题src={isThingIntersecting ? src : ""}当它为真时它获取图像。但是当它离开视口时它删除图像并且当它再次出现时它再次获取。

我们可以 unobserve 获取图像时的目标吗？我不想一次又一次地获取。

这是我的代码 https://codesandbox.io/s/frosty-lovelace-yjfl9?file=/src/App.js:732-1349

Answer 1

使用 Intersection Observer 延迟加载图像的基本思想是仅当图像到达视口时才获取图像。因此，您将能够节省字节数并且初始页面加载会更顺畅。

要分析视口 Intersection Observer 可以使用 API。

这是您在用户离开图像时移除图像的错误 src。为避免这种情况，您可以在图像的 intersect 为真时设置图像 src 一次。您可以使用 onIntersect 添加该逻辑。

对您的代码进行了一些调整Here

改进：

设置图像源后立即移除观察者。

图片加载完成后就不需要再在图片上观察了。您可以在设置图像 src 属性后删除事件侦听器。

加载图像后如何取消观察？

how to unobserve after image is loaded?

javascript

lazy-loading

reactjs

react-redux