So führen Sie Aktionen aus, nachdem ein Bild in React geladen wurde: Verwenden des onLoad-Ereignisses oder der Complete-Eigenschaft-js-Tutorial-php.cn

So führen Sie Aktionen aus, nachdem ein Bild in React geladen wurde: Verwenden des onLoad-Ereignisses oder der Complete-Eigenschaft

Mary-Kate Olsen

Freigeben： 2024-11-15 10:03:02

Original

548 Leute haben es durchsucht

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

Das durch ein HTML-Element ausgelöste Ladeereignis wird standardmäßig nicht zum Fensterobjekt übertragen. Wenn daher ein Bild mithilfe eines img-HTML-Elements geladen wird und Sie das Fensterobjekt benachrichtigen müssen, müssen Sie das Ereignis manuell an dieses senden.

Ein Beispiel:

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

Nach dem Login kopieren

Konsolenausgabe: Das zweite Protokoll „Window Load Event“ wird durch den Aufruf von „dispatchEvent“ ausgelöst

Image load event
Window load event
Window load event

Nach dem Login kopieren

Beispiele für die Aktualisierung von Text basierend auf dem Bildladestatus in React

Beispiel 1: Verwendung der HTML-Eigenschaft „complete“.

Das Simulieren eines API-Aufrufs zum Abrufen einer Bild-URL und deren Übergabe an die Banner-Komponente löst ein erneutes Rendern aus, wenn sich imgUrl ändert, sodass der korrekte Wert „completed“ in der zweiten Renderphase erfasst werden kann.

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

Nach dem Login kopieren

Beispiel 2: Verwendung des onLoad-Ereignisses

Aktualisieren Sie den Komponentenstatus im onLoad-Ereignisrückruf

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

Nach dem Login kopieren

Was passiert, wenn sich ein Banner im DOM befindet und nicht ausgehängt wird, sondern die IMG-URL, die als Requisite an die Komponente übergeben wird, sich ständig ändert?

Fortsetzung folgt...

Das obige ist der detaillierte Inhalt vonSo führen Sie Aktionen aus, nachdem ein Bild in React geladen wurde: Verwenden des onLoad-Ereignisses oder der Complete-Eigenschaft. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!