search

Home  >  Article  >  Web Front-end  >  How to Perform Actions After an Image Loads in React: Using the onLoad Event or the complete Property

How to Perform Actions After an Image Loads in React: Using the onLoad Event or the complete Property

Mary-Kate Olsen
Mary-Kate OlsenOriginal
2024-11-15 10:03:02482browse

How to Perform Actions After an Image Loads in React: Using the onLoad Event or the complete Property

The load event triggered by an HTML element does not bubble up to the window object by default. Therefore, when an image is loaded using an img HTML element, if you need to notify the window object, you must manually dispatch the event to it.

An example:

HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  </head>
  <body>
    <img>



<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');
});

Console output: the second log 'Window Load Event' is triggered by calling dispatchEvent

Image load event
Window load event
Window load event

Examples of Updating Text Based on Image Loading Status in React

Example 1: Using HTML 'complete' Property

Simulating an API call to fetch an image URL and passing it to the Banner component triggers a re-render when imgUrl changes, allowing the correct value of completed to be captured at the second render stage.

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} />
}

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 ref={ref} src={imgUrl}
                onLoad={() => console.log("loaded")}
                onError={() => console.log("error")}/>
            <p>{completed ? "Image loaded" : "Image is not loaded"}</p>
        </div>
    );
}

Example 2: Using onLoad Event

Update the component state in the onLoad event callback

function StaticBanner() {
    const [loaded, setLloaded] = useState(false);
    return (
        <div>
            <img src="https://placehold.co/100x100"
                onLoad={() => {
                    console.log("StaticBanner img loaded");
                    setLloaded(true);
                }}
                onError={() => console.log("StaticBanner img error")}/>
            <p>{loaded ? "Image loaded" : "Image is not loaded"}</p>
        </div>
    );
}

What if a Banner lives in the DOM and does not unmount, but the img url that is passed into the component as a prop that changes constantly?

To be continued...

The above is the detailed content of How to Perform Actions After an Image Loads in React: Using the onLoad Event or the complete Property. For more information, please follow other related articles on the PHP Chinese website!

html Object if using Property Event console default dom
Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：How to Update a Single Item in an Array Field in Firestore?Next article：How to Update a Single Item in an Array Field in Firestore?

Related articles

See more