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

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叉形- 74 y015?file=/src/index.tsx: 0 - 786

Answer 1

可以在useInView中设置triggerOnce:true像这样:

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

Answer 2

可以使用缓存并从缓存这是需要获取的新项数