Intersection Observer 图片懒加载显示异常问题求助

你这个问题大概率是Intersection Observer的回调逻辑没处理好元素首次进入视口的情况，或者CSS过渡与初始状态的配合有问题。下面是修正后的完整代码，以及关键修改说明：

修正后的完整代码 #

HTML #

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>图片淡入效果</title>
    <style>
        body {
            margin: 0;
            padding: 0;
            height: 2000px;
        }
        .fade-in-img {
            opacity: 0;
            transition: opacity 0.6s ease-in-out;
            display: block;
            margin: 50px auto;
            width: 600px;
            height: 400px;
            object-fit: cover;
        }
        .fade-in-img.visible {
            opacity: 1;
        }
    </style>
</head>
<body>
    <div style="height: 1000px;"></div>
    <img src="https://picsum.photos/600/400?random=1" alt="示例图片" class="fade-in-img">
    <div style="height: 1000px;"></div>
    <img src="https://picsum.photos/600/400?random=2" alt="示例图片" class="fade-in-img">
    <div style="height: 1000px;"></div>
    <img src="https://picsum.photos/600/400?random=3" alt="示例图片" class="fade-in-img">

    <script>
        const observerOptions = {
            root: null,
            rootMargin: '0px',
            threshold: 0.1
        };

        const observerCallback = (entries, observer) => {
            entries.forEach(entry => {
                if (entry.isIntersecting) {
                    entry.target.classList.add('visible');
                    // 若只需一次淡入，取消下面注释即可停止观察该元素
                    // observer.unobserve(entry.target);
                } else {
                    // 若需滚动出视口后隐藏，取消下面注释
                    // entry.target.classList.remove('visible');
                }
            });
        };

        const imageObserver = new IntersectionObserver(observerCallback, observerOptions);

        document.querySelectorAll('.fade-in-img').forEach(img => {
            imageObserver.observe(img);
        });
    </script>
</body>
</html>

关键修改点说明 #

1. CSS过渡优化：给目标图片添加明确的transition属性，确保淡入动画平滑生效，初始opacity: 0作为默认状态，避免过渡逻辑紊乱。
2. Observer阈值调整：设置threshold: 0.1，让元素刚进入视口10%就触发回调，不用等完全进入才显示，解决首次滚动不触发的问题。
3. 回调逻辑简化：直接通过entry.isIntersecting判断元素是否进入视口，添加visible类触发淡入。如果希望图片只淡入一次，可在添加类后调用observer.unobserve(entry.target)停止观察；如果需要反复触发（滚动出再进入重新淡入），则保留else部分移除类。
4. 初始视口元素处理：Observer初始化时会自动检查元素是否在视口内，页面加载时就处于视口的图片也能立即触发淡入。

内容的提问来源于stack exchange，提问作者Ethan Suwan