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