如果已经获取，如何停止再获取图像？

Question

如果已经获取，如何停止再获取图像？我正在使用下面的插件来检查元素是否进入视图端口。但问题是，当我向下滚动，获取图像，这是正确的行为，但当我向上移动，它再次隐藏图像。如果我再往下移动，它会再拿出图像吗？

如何防止一次又一次的获取图像。如果已经进入DOM，请不要删除。

https://www.npmjs.com/package/react-intersection-observer

import * as React from "react";
// @ts-ignore Wrong type
import { createRoot } from "react-dom/client";
import { useInView } from "react-intersection-observer";
import ScrollWrapper from "./elements/ScrollWrapper";
import "./styles.css";

function App() {
  const { ref, inView } = useInView({
    threshold: 0
  });

  return (
    <>
      <div style={{ height: "200vh" }}>eeeeee</div>
      <div ref={ref} className="inview-block">
        <h2>
          <img
            src={
              inView
                ? "https://inviewimaging.com/wp-content/uploads/2015/04/Inview-Graphic.png"
                : null
            }
            alt=""
          />
        </h2>
      </div>
    </>
  );
}

const root = createRoot(document.getElementById("root"));
root.render(<App />);

这是我的密码。有什么建议吗？

https://codesandbox.io/s/useinview-forked-74y015?file=/src/index.tsx:0-786

Answer 1

您可以在这样的useInView中设置触发器like :true：

  const { ref, inView } = useInView({
    threshold: 0,
    triggerOnce:true,
  });

Answer 2

您可以使用缓存，并从缓存中比较要获取多少项。