Bagaimanakah Saya Boleh Menggantikan Imej Rosak dengan JavaScript atau jQuery?

Ganti Imej Rosak dengan jQuery/JavaScript

Imej yang rosak boleh merosakkan estetika halaman web anda, menjadikan pengguna mengalami pengalaman yang tidak lengkap atau tidak menarik secara visual . Nasib baik, jQuery dan JavaScript menawarkan alatan untuk menangani isu ini dengan elegan.

Pendekatan jQuery

Walaupun seseorang mungkin pada mulanya mempertimbangkan untuk menggunakan jQuery untuk mengurus imej yang rosak, JavaScript menyediakan yang lebih mudah, penyelesaian yang lebih berkesan. Dengan mengendalikan acara onError untuk setiap imej, anda boleh menetapkan semula sumbernya jika ia gagal dimuatkan.

JavaScript Solution

Coretan kod JavaScript di bawah menangkap acara onError untuk elemen imej, mengemas kini atribut srcnya untuk memaparkan imej pemegang tempat (cth., "noimage.gif").

function imgError(image) {
    image.onerror = "";
    image.src = "/images/noimage.gif";
    return true;
}

<img src="image.png" onerror="imgError(this);"/>

Sebagai alternatif, anda boleh menggunakan sintaks yang lebih ringkas tanpa fungsi JavaScript yang berasingan:

<img src="image.png" onError="this.onerror=null;this.src='/images/noimage.gif';" />

Keserasian

Jadual di bawah menyenaraikan penyemak imbas yang menyokong kemudahan ralat untuk mengendalikan rosak imej:

https://www.quirksmode.org/dom/events/error.html

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Menggantikan Imej Rosak dengan JavaScript atau jQuery?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!