react-lazy-load-image-component标签页懒加载异常求助：非首标签页图片一次性加载

问题根源 #

非激活标签页通常会被设置display: none隐藏，这会导致元素的布局高度/宽度变为0，react-lazy-load-image-component的滚动检测逻辑会误判所有图片都已进入可视区域或页面底部，从而一次性加载全部图片。

具体解决方案 #

1. 替换display: none的隐藏方式

不要用display: none隐藏非激活标签页，改用能保留元素布局信息的隐藏方式：

.inactive-tab {
  position: absolute;
  left: -9999px;
  top: -9999px;
  visibility: hidden;
}
.active-tab {
  position: static;
  visibility: visible;
}

这样懒加载组件能正确计算图片的位置，不会误判。

2. 标签页切换时手动触发懒加载检测

切换标签页后，强制触发滚动事件，让组件重新检测可视区域内的图片：

import { LazyLoadImage, trackWindowScroll } from 'react-lazy-load-image-component';
import { useState, useEffect } from 'react';

const Tabs = () => {
  const [activeTab, setActiveTab] = useState(0);

  useEffect(() => {
    // 手动触发全局滚动事件，触发懒加载重新检测
    window.dispatchEvent(new Event('scroll'));
  }, [activeTab]);

  return (
    <div>
      <div className="tab-buttons">
        <button onClick={() => setActiveTab(0)}>标签1</button>
        <button onClick={() => setActiveTab(1)}>标签2</button>
      </div>
      <div className="tab-content">
        {activeTab === 0 && (
          <div className="tab-pane active-tab">
            <LazyLoadImage src="/img1.jpg" alt="图1" />
            {/* 更多图片 */}
          </div>
        )}
        {activeTab === 1 && (
          <div className={`tab-pane ${activeTab === 1 ? 'active-tab' : 'inactive-tab'}`}>
            <LazyLoadImage src="/img2.jpg" alt="图2" />
            {/* 更多图片 */}
          </div>
        )}
      </div>
    </div>
  );
};

export default trackWindowScroll(Tabs);

3. 自定义Intersection Observer根元素

给懒加载组件指定当前激活标签页的容器为Intersection Observer的根元素，确保只检测当前可视标签页内的图片：

import { useRef, useState } from 'react';
import { LazyLoadImage } from 'react-lazy-load-image-component';

const Tabs = () => {
  const [activeTab, setActiveTab] = useState(0);
  const tab1Ref = useRef(null);
  const tab2Ref = useRef(null);

  const getCurrentRoot = () => {
    return activeTab === 0 ? tab1Ref.current : tab2Ref.current;
  };

  return (
    <div>
      {/* 标签页按钮 */}
      <div className="tab-buttons">
        <button onClick={() => setActiveTab(0)}>标签1</button>
        <button onClick={() => setActiveTab(1)}>标签2</button>
      </div>
      <div className="tab-content">
        {activeTab === 0 && (
          <div ref={tab1Ref} className="tab-pane">
            <LazyLoadImage
              src="/img1.jpg"
              alt="图1"
              observerOptions={{
                root: getCurrentRoot(),
                rootMargin: '0px',
                threshold: 0.1
              }}
            />
          </div>
        )}
        {activeTab === 1 && (
          <div ref={tab2Ref} className="tab-pane">
            <LazyLoadImage
              src="/img2.jpg"
              alt="图2"
              observerOptions={{
                root: getCurrentRoot(),
                rootMargin: '0px',
                threshold: 0.1
              }}
            />
          </div>
        )}
      </div>
    </div>
  );
};

4. 条件渲染非激活标签页内容

只在标签页激活时才渲染对应内容，这样非激活时图片组件根本不会挂载，自然不会触发错误的加载逻辑：

{activeTab === 1 && (
  <div className="tab-pane">
    {/* 只在激活时渲染图片 */}
    <LazyLoadImage src="/img2.jpg" alt="图2" />
  </div>
)}

内容的提问来源于stack exchange，提问作者Aleksandr Shefer