如何在 React 中加载图像后执行操作：使用 onLoad 事件或complete 属性

HTML 元素触发的 load 事件默认不会冒泡到 window 对象。因此，当使用 img HTML 元素加载图像时，如果需要通知 window 对象，则必须手动向其调度事件。

示例：

HTML

  
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  
  
    <img  src="/static/imghwm/default1.png" data-src="https://placehold.co/100x100" class="lazy" alt="如何在 React 中加载图像后执行操作：使用 onLoad 事件或complete 属性" >



<p>JS<br>
</p>

<pre class="brush:php;toolbar:false">document.getElementById('image').addEventListener('load', function() {
  console.log('Image load event');
  window.dispatchEvent(new Event('load'));  // Manually dispatch load event to window
});

window.addEventListener('load', function() {
  console.log('Window load event');
});

控制台输出：第二个日志“Window Load Event”是通过调用dispatchEvent
触发的

Image load event
Window load event
Window load event

React 中根据图像加载状态更新文本的示例

示例 1：使用 HTML 'complete' 属性

模拟 API 调用来获取图像 URL 并将其传递给 Banner 组件，当 imgUrl 更改时会触发重新渲染，从而允许在第二个渲染阶段捕获正确的 Completed 值。

import { useRef , useState , useEffect } from "react";

export default function App() {
    const [imgUrl, setImgUrl] = useState("");
    useEffect(() => {
        // simulate calling API to get image url
        const loadImage = () => {
            setTimeout(() => {
                setImgUrl("https://placehold.co/200x100")
          }, 1500);
        }
      loadImage();
    }, []);
    return <banner imgurl="{imgUrl}"></banner>
}

function Banner({ imgUrl }) {
    const ref = useRef(null);
    // this works when the imgUrl changes, triggering a re-render. Otherwise, the value of completed will always be false
   const completed = Boolean(ref.current?.complete);
    return (
        <div>
            <img  src="/static/imghwm/default1.png" data-src="https://placehold.co/100x100" class="lazy" ref="{ref}" onload="{()" alt="如何在 React 中加载图像后执行操作：使用 onLoad 事件或complete 属性" > console.log("loaded")}
                onError={() => console.log("error")}/>
            <p>{completed ? "Image loaded" : "Image is not loaded"}</p>
        </div>
    );
}

示例 2：使用 onLoad 事件

在onLoad事件回调中更新组件状态

function StaticBanner() {
    const [loaded, setLloaded] = useState(false);
    return (
        <div>
            <img  src="/static/imghwm/default1.png" data-src="https://placehold.co/100x100" class="lazy" onload="{()" alt="如何在 React 中加载图像后执行操作：使用 onLoad 事件或complete 属性" > {
                    console.log("StaticBanner img loaded");
                    setLloaded(true);
                }}
                onError={() => console.log("StaticBanner img error")}/>
            <p>{loaded ? "Image loaded" : "Image is not loaded"}</p>
        </div>
    );
}

如果 Banner 存在于 DOM 中并且不会卸载，但作为 prop 传递到组件中的 img url 不断变化怎么办？

未完待续...

以上是如何在 React 中加载图像后执行操作：使用 onLoad 事件或complete 属性的详细内容。更多信息请关注PHP中文网其他相关文章！