Rumah > Artikel > hujung hadapan web > Cara Melakukan Tindakan Selepas Imej Dimuatkan dalam React: Menggunakan Acara onLoad atau Harta yang lengkap

Cara Melakukan Tindakan Selepas Imej Dimuatkan dalam React: Menggunakan Acara onLoad atau Harta yang lengkap

Mary-Kate Olsenasal: 2024-11-15 10:03:02480semak imbas

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

Acara pemuatan yang dicetuskan oleh elemen HTML tidak menggelembung ke objek tetingkap secara lalai. Oleh itu, apabila imej dimuatkan menggunakan elemen HTML img, jika anda perlu memberitahu objek tetingkap, anda mesti menghantar acara itu secara manual kepadanya.

Contoh:

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

Output konsol: log kedua 'Peristiwa Muatan Tetingkap' dicetuskan dengan memanggil dispatchEvent

Image load event
Window load event
Window load event

Contoh Pengemaskinian Teks Berdasarkan Status Pemuatan Imej dalam React

Contoh 1: Menggunakan Harta HTML 'lengkap'

Mensimulasikan panggilan API untuk mengambil URL imej dan menghantarnya kepada komponen Sepanduk mencetuskan pemaparan semula apabila imgUrl berubah, membenarkan nilai yang betul untuk dilengkapkan ditangkap pada peringkat pemaparan kedua.

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

Contoh 2: Menggunakan Acara onLoad

Kemas kini keadaan komponen dalam panggilan balik acara onLoad

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

Bagaimana jika Sepanduk tinggal di DOM dan tidak menyahlekap, tetapi url img yang dihantar ke dalam komponen sebagai prop yang sentiasa berubah?

Bersambung...

Atas ialah kandungan terperinci Cara Melakukan Tindakan Selepas Imej Dimuatkan dalam React: Menggunakan Acara onLoad atau Harta yang lengkap. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

html Object if using Property Event console default dom

Kenyataan：

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel sebelumnya：Bagaimana untuk Mengemas kini Item Tunggal dalam Medan Tatasusunan dalam Firestore?Artikel seterusnya：Bagaimana untuk Mengemas kini Item Tunggal dalam Medan Tatasusunan dalam Firestore?

Artikel berkaitan

Lihat lagi