React中img标签onLoad事件未按预期工作，渐进式背景加载受阻

我来帮你搞定这个渐进式背景加载的问题！你提到的onLoad事件没按预期触发，大概率是几个常见的小细节没处理好，咱们一步步拆解解决：

核心问题分析 #

你说的那种<img src={image} alt="" onLoad={console...}写法，很可能犯了一个常见错误：直接执行表达式而非绑定函数。比如onLoad={console.log('loaded')}会在组件渲染时立刻输出日志，而不是等图片加载完成后触发。另外，图片缓存、DOM挂载状态也会导致onLoad不触发。

完整实现方案 #

下面分原生JS和React两种场景给出可直接复用的代码，完美实现「小图→中图→大图」的渐进式背景切换：

场景1：原生JavaScript实现 #

// 按从小到大的顺序定义图片URL
const imageUrls = [
  'small-bg.jpg',
  'medium-bg.jpg',
  'large-bg.jpg'
];

let currentLoadIndex = 0;
const targetContainer = document.getElementById('bg-container');

// 加载下一张图片的核心函数
function loadNextImage() {
  if (currentLoadIndex >= imageUrls.length) return;

  const img = new Image();
  img.src = imageUrls[currentLoadIndex];

  // 处理图片缓存：如果图片已在缓存中，直接触发加载完成逻辑
  if (img.complete) {
    switchBackgroundAndContinue(img);
    return;
  }

  // 正常加载完成回调
  img.onload = () => switchBackgroundAndContinue(img);
  // 加载失败降级：跳过当前图，继续加载下一张
  img.onerror = () => {
    console.error(`加载失败：${imageUrls[currentLoadIndex]}`);
    currentLoadIndex++;
    loadNextImage();
  };
}

// 切换背景并启动下一张加载
function switchBackgroundAndContinue(img) {
  targetContainer.style.backgroundImage = `url(${img.src})`;
  currentLoadIndex++;
  loadNextImage();
}

// 启动初始加载
loadNextImage();

场景2：React组件实现 #

考虑到你提到了src={image}的写法，大概率在使用React，这里给出组件化的实现：

import { useEffect, useRef } from 'react';

const ProgressiveBackground = ({ imageUrls, className }) => {
  const containerRef = useRef(null);
  // 用useRef保存加载索引，避免组件重渲染时重置
  const loadIndexRef = useRef(0);

  useEffect(() => {
    const loadNextImage = () => {
      if (loadIndexRef.current >= imageUrls.length) return;

      const img = new Image();
      img.src = imageUrls[loadIndexRef.current];

      // 处理缓存情况
      if (img.complete) {
        handleImageLoad(img);
        return;
      }

      img.onload = () => handleImageLoad(img);
      img.onerror = () => {
        console.error(`加载失败：${imageUrls[loadIndexRef.current]}`);
        loadIndexRef.current++;
        loadNextImage();
      };
    };

    const handleImageLoad = (img) => {
      if (containerRef.current) {
        containerRef.current.style.backgroundImage = `url(${img.src})`;
      }
      loadIndexRef.current++;
      loadNextImage();
    };

    loadNextImage();

    // 组件卸载时清理：终止后续加载
    return () => {
      loadIndexRef.current = imageUrls.length;
    };
  }, [imageUrls]);

  return <div ref={containerRef} className={className} />;
};

// 使用示例
// <ProgressiveBackground
//   imageUrls={['small.jpg', 'medium.jpg', 'large.jpg']}
//   className="full-screen-bg"
// />

关键注意点 #

1. 处理图片缓存：必须检查img.complete属性，否则已缓存的图片不会触发onload事件，导致流程卡住。
2. 正确绑定onLoad：在JSX中一定要绑定函数，比如onLoad={() => handleLoad()}，而不是直接写执行语句。
3. 错误降级处理：添加onerror回调，避免单张图片加载失败导致整个流程终止。

内容的提问来源于stack exchange，提问作者Mauricio Machado