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

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

  
    <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="So führen Sie Aktionen aus, nachdem ein Bild in React geladen wurde: Verwenden des onLoad-Ereignisses oder der Complete-Eigenschaft" >



<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}"></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="So führen Sie Aktionen aus, nachdem ein Bild in React geladen wurde: Verwenden des onLoad-Ereignisses oder der Complete-Eigenschaft" > 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="/static/imghwm/default1.png" data-src="https://placehold.co/100x100" class="lazy" onload="{()" alt="So führen Sie Aktionen aus, nachdem ein Bild in React geladen wurde: Verwenden des onLoad-Ereignisses oder der Complete-Eigenschaft" > {
                    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!