加载图像后如何不观察？

Question

我正在lazy-load我的图像。 当谈到view port时，我正在加载我的图像。它工作正常。我能够在查看端口时加载图像。但我面临一个问题。

当我松开视口时，我的图像gone ，然后又回来了。所以我需要不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: ""} 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 为 true 时设置图像 src 一次。 您可以使用onIntersect添加该逻辑。

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

改进：

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

加载图像后，您无需再观察图像。 您可以在设置图像src属性后移除事件侦听器。