Maison >interface Web >js tutoriel >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

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 Olsenoriginal: 2024-11-15 10:03:02588parcourir

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

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

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

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

Que se passe-t-il si une bannière vit dans le DOM et ne se démonte pas, mais l'URL img qui est transmise au composant en tant qu'accessoire qui change constamment ?

A suivre...

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

html Object if using Property Event console default dom

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Comment mettre à jour un seul élément dans un champ de tableau dans Firestore ?Article suivant：Comment mettre à jour un seul élément dans un champ de tableau dans Firestore ?

Articles Liés

Voir plus