Intersection Observer在元素可见度不足50%时失效，如何实现全范围加载图片？

我用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);
        };
    }, []);
}

当前效果：仅当元素可见度达到50%及以上时，才会加载图片。
期望效果：只要元素在视口中有任何可见部分（可见度0%以上），就触发图片加载。

问题出在Intersection Observer的阈值配置与触发逻辑的配合上。虽然你设置了包含0的阈值数组，但浏览器的Intersection Observer实现可能在元素刚进入视口（intersectionRatio>0但未达到第一个非0阈值）时未正确触发回调，或者判断逻辑存在疏漏。

你可以通过以下两种方式解决：

方式一：简化阈值配置 #

将阈值直接设置为0，这样只要元素有任何部分进入视口，就会触发回调：

function getIntersectionObserver() {
    if (observer === undefined) {
        observer = new IntersectionObserver(handleIntersections, {
            root: null,
            rootMargin: "0px",
            threshold: 0 // 改为单个0值
        });
    }
    return observer;
}

方式二：优化回调判断逻辑 #

如果需要保留多阈值配置，确保回调能正确响应intersectionRatio>0的情况。调整handleIntersections中的判断，只要元素有可见部分就触发加载：

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

            // 只要intersectionRatio大于0，就触发加载
            if (entry.intersectionRatio > 0) {
                observer.unobserve(entry.target);
                listenerCallbacks.delete(entry.target);
                cb();
            }
        }
    });
}

说明：entry.isIntersecting在元素刚进入视口时可能和intersectionRatio>0存在细微差异，直接判断intersectionRatio>0更准确，能覆盖所有元素有可见部分的场景。

内容的提问来源于stack exchange，提问作者Apurba HR Mondal