<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事件的触发不一致，即在我初始加载页面并刷新时，它不会被触发，但当我在React中交互地挂载组件时，它会被触发。

我尝试去除decoding="async"并添加onError处理程序，以查看是否可以获得更多信息，但行为没有改变。

我在macOS Safari和Chrome浏览器上看到相同的行为。

编辑：在不起作用的情况下，图像根本没有被加载。

- Ilja

---

图片是否在不触发onLoad事件的情况下加载，还是根本没有加载？ - anna

@anna根本无法加载 - Ilja

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;

- Ilja

---

这就是我一直在寻找的。 - Supun Praneeth

完美。不确定为什么JS在之前没有加载。 - Shivam

Answer 2

你能提供更多关于错误的信息吗？ 使用箭头函数，并在图像的onLoad事件上调用它，应该可以工作。

import React from 'react';


  onLoadFunction=()=>{
    console.log('just loaded');
  }
  return (
      <img
        src="http://..."
        onLoad={this.onLoadFunction}

      />
  );
}

export default Image;

- ProblemsEverywhere

Answer 3

问题可能是Image在DOM中是保留关键字，考虑更改函数名称。否则可能会更改Image类。

// Image Size is >3MB
const App = () => {
  
  const onImageLoad = () => {
    console.log("Working...")
  }

  return (
    <div>
      <img src="https://unplash-api.herokuapp.com/api/Ri8c2qFg32A/full" onLoad={onImageLoad}/>
    </div>
  )
}

ReactDOM.render(<App />, document.getElementById("root"))

img {
  width: 100%;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root"></div>

- Raman Choudhary