как остановить повторную загрузку изображения, если она уже получена? Я использую приведенный ниже плагин, чтобы проверить, входит ли элемент в порт просмотра или нет. но проблема в том, что когда я прокручиваю вниз, он извлекает изображение, которое является правильным поведением, но когда я перемещаюсь вверх, оно снова прячет изображение. Если я снова сдвинусь вниз, он снова получит изображение?
как предотвратить выборку изображения снова и снова. Если уже вошли в 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
но не во всех браузерах работает
Я думаю, это зависит от вашего варианта использования, но большинство современных браузеров поддерживают его для изображений. caniuse.com/?search=lazy%20loading
Вы можете использовать кеш и сравнить из кеша, сколько новых элементов для извлечения
Вы можете установить triggerOnce:true в useInView как это :
const { ref, inView } = useInView({
threshold: 0,
triggerOnce:true,
});
Пробовали ли вы использовать встроенные возможности ленивой загрузки, которые есть в HTML5? Они могут решить вашу проблему вообще без проверки
inView
.