Comment effectuer des actions après le chargement d'une image dans React : à l'aide de l'événement onLoad ou de la propriété complète-js tutoriel-php.cn

Comment effectuer des actions après le chargement d'une image dans React : à l'aide de l'événement onLoad ou de la propriété complète

Mary-Kate Olsen

Libérer： 2024-11-15 10:03:02

original

548 Les gens l'ont consulté

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

L'événement de chargement déclenché par un élément HTML ne remonte pas jusqu'à l'objet window par défaut. Par conséquent, lorsqu'une image est chargée à l'aide d'un élément HTML img, si vous devez notifier l'objet window, vous devez lui envoyer manuellement l'événement.

Un exemple :

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

Copier après la connexion

Sortie de la console : le deuxième journal 'Window Load Event' est déclenché en appelant dispatchEvent

Image load event
Window load event
Window load event

Copier après la connexion

Exemples de mise à jour de texte en fonction de l'état de chargement de l'image dans React

Exemple 1 : utilisation de la propriété HTML « complete »

La simulation d'un appel d'API pour récupérer l'URL d'une image et sa transmission au composant Banner déclenche un nouveau rendu lorsque imgUrl change, permettant ainsi de capturer la valeur correcte de "completed" lors de la deuxième étape de rendu.

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

Copier après la connexion

Exemple 2 : Utilisation de l'événement onLoad

Mettre à jour l'état du composant dans le rappel de l'événement onLoad

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

Copier après la connexion