<img /> 标签的 onLoad 事件在初始页面访问时不会触发

Question

考虑以下组件

import React from 'react';

function Image() {
  function onLoad() {
    console.log("Loaded...")
  }

  return (
      <img
        src="http://..."
        onLoad={onLoad}
        decoding="async"
      />
  );
}

export default Image;

由于某种原因onLoad，事件没有一致地触发，即当我最初加载页面并刷新它时，它不会被触发，但是当我在反应中交互安装组件时，即没有页面加载时，它会被触发。

我尝试删除decoding="async"和添加处理onError程序以查看这些处理程序是否提供了更多信息，但行为没有改变。

我在 macOS safari 和 Chrome 浏览器上看到了同样的行为。

编辑：如果它不起作用，则根本不会加载图像

Answer 1

我想出了如何让它在我的案例中发挥作用。我猜 onLoad 事件没有执行，因为图像已经加载，所以我将代码更改为以下内容，现在它按预期工作

import React, { useRef, useEffect } from 'react';

function Image() {
  const imgRef = useRef<HTMLImageElement>(null);

  function onLoad() {
    console.log("Loaded...")
  }

  useEffect(() => {
   if (imgRef.current?.complete) {
    onLoad();
   }
  }, []);

  return (
      <img
        ref={imgRef}
        src="http://..."
        onLoad={onLoad}
        decoding="async"
      />
  );
}

export default Image;