Intersection Observer 不是在视口上的可见性低于 50% 的工作元素

Question

我添加了一个 Intersection Observer 用于图像延迟加载。 但是由于某种原因，如果视口上的div元素的可见性小于 50%，则 Intersection Observer 不会加载图像。

我想加载图像，即使它在视口上显示为 0% 到 100%。 这是我的 IntersectionObserver 实例：

import {useEffect} from "react";
let listenerCallbacks = new WeakMap();
let observer;

function handleIntersections(entries) {
    entries.forEach(entry => {
        if (listenerCallbacks.has(entry.target)) {
            let cb = listenerCallbacks.get(entry.target);

            if (entry.isIntersecting || entry.intersectionRatio > 0) {
                observer.unobserve(entry.target);
                listenerCallbacks.delete(entry.target);
                cb();
            }
        }
    });
}

function getIntersectionObserver() {
    if (observer === undefined) {
        observer = new IntersectionObserver(handleIntersections, {
            root: null,
            rootMargin: "0px",
            threshold: [0, 0.1, 0.2, 0.3, 0.4, 0.5, 0.6, 0.7, 0.8, 0.9, 1]
        });
    }
    return observer;
}

export function useIntersection(elem, callback) {
    useEffect(() => {
        let target = elem.current;
        let observer = getIntersectionObserver();
        listenerCallbacks.set(target, callback);
        observer.observe(target);

        return () => {
            listenerCallbacks.delete(target);
            observer.unobserve(target);
        };
    }, []);
}

当前结果：

我想要的是：

Answer 1

有threshold: [0, 0.1, 0.2, 0.3, 0.4, 0.5, 0.6, 0.7, 0.8, 0.9, 1]会在每次可见性再超过 10% 时运行回调，所以你会过度获取。

由于您想在div的一小部分可见时立即获取，因此将threshold设置为 0，例如threshold:0 ，并将您的if语句在handleIntersections中更改为：

if (entry.isIntersecting) 

最后，它还与您滚动的速度、后端的响应速度以及图像的大小有关。

参考mdn 。