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

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

Mary-Kate OlsenOriginal: 2024-11-15 10:03:02549Durchsuche

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

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

Image load event
Window load event
Window load event

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

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

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!

html Object if using Property Event console default dom

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Wie aktualisiere ich ein einzelnes Element in einem Array-Feld in Firestore?Nächster Artikel：Wie aktualisiere ich ein einzelnes Element in einem Array-Feld in Firestore?

In Verbindung stehende Artikel

Mehr sehen