Bagaimanakah Saya Boleh Mengendalikan Imej Rosak dengan Cekap dalam Halaman Web Saya Menggunakan jQuery atau JavaScript?

Mengendalikan Imej Rosak dengan jQuery atau JavaScript

Masalah:
Halaman web dengan banyak imej mengalami kerosakan kejadian imej kerana tidak tersedia.

jQuery Pendekatan:

1. Peroleh elemen imej: $("img").
2. Tapis imej rosak: $brokenImages = $("img").filter(function( ) { kembalikan this.complete && !this.naturalWidth; imej: $brokenImages.attr("src", "/broken-image.png").

JavaScript onError Event:

Pendekatan alternatif melibatkan mengendalikan acara onError untuk setiap imej untuk menetapkan semula sumbernya secara langsung.

Tentukan pengendalian ralat imej fungsi:

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

Gunakan fungsi dalam HTML:

<img  src="/static/imghwm/default1.png" data-src="image.png" class="lazy" onerror="imgError(this);" alt="Bagaimanakah Saya Boleh Mengendalikan Imej Rosak dengan Cekap dalam Halaman Web Saya Menggunakan jQuery atau JavaScript?" >

Atau tanpa fungsi:

<img  src="/static/imghwm/default1.png" data-src="image.png" class="lazy" onerror="this.onerror=null;this.;" alt="Bagaimanakah Saya Boleh Mengendalikan Imej Rosak dengan Cekap dalam Halaman Web Saya Menggunakan jQuery atau JavaScript?" >

Keserasian Pelayar:

Untuk pendekatan pengendalian acara onError, sila rujuk jadual keserasian di:

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

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