React 图片动画加载技术详解 |

图片加载动画的挑战

开发过程中，我遇到了一个常见的问题：页面初始加载时，多张图片未完成加载会导致动画效果丢失。这不仅影响了用户体验，也降低了页面的交互质感。

解决方案：动态监听与懒加载

我们的解决方案包含两个核心策略：

图片加载监听：确保所有图片加载完成后再触发动画
滚动懒加载：延迟加载动画，提高初始页面响应速度

代码实现

useEffect(() => {
    const onLoad = () => {
      gsap.utils
        .toArray(".section-image-friends")
        .forEach((image: any, index) => {
          // 交替方向，创建更生动的视觉效果
          const direction = index % 2 === 0 ? "-10vw" : "10vw"; 
          
          gsap.fromTo(
            image,
            {
              x: direction,
              opacity: 0,
              rotationX: 90,
            },
            {
              x: 0,
              opacity: 1,
              rotationX: 0,
              duration: 1.2,
              scrollTrigger: {
                trigger: image,
                toggleActions: "play none none reverse",
                markers: false,
              },
            }
          );
        });
    };

    // 图片加载状态追踪
    const images = document.querySelectorAll<HTMLImageElement>(
      ".section-image-friends"
    );
    let loadedCount = 0;

    images.forEach((img) => {
      if (img.complete) {
        loadedCount++;
      } else {
        img.addEventListener("load", () => {
          loadedCount++;
          if (loadedCount === images.length) onLoad();
        });
      }
    });

    // 如果图片已全部加载，立即触发动画
    if (loadedCount === images.length) onLoad(); 
  }, []);