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

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

  
    <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="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" >



<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}"></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="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" > 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="/static/imghwm/default1.png" data-src="https://placehold.co/100x100" class="lazy" onload="{()" alt="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" > {
                    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!