Rumah > hujung hadapan web > tutorial js > JavaScript menetapkan paparan imej lalai dengan menggunakan onerror dan bukannya helah alt_javascript

JavaScript menetapkan paparan imej lalai dengan menggunakan onerror dan bukannya helah alt_javascript

PHP中文网
Lepaskan: 2016-05-16 15:12:59
asal
1527 orang telah melayarinya

Kod JavaScript

 //图像加载出错时的处理
function errorImg(img) {
img.src = "默认图片.jpg";
img.onerror = null;
}
Salin selepas log masuk

kod html

<img width="32" height="32" src="1.jpg" onerror="errorImg(this)" />
Salin selepas log masuk

Demi kecantikan, imej garpu tidak akan dipaparkan apabila imej halaman web tidak wujud

Apabila apabila halaman dipaparkan, jika imej dialihkan atau hilang, imej dengan X akan dipaparkan pada halaman, yang sangat mempengaruhi pengalaman pengguna. Walaupun atribut alt digunakan untuk memberikan mesej segera "Gambar XX", ia tidak akan memberi banyak kesan.
Malah, ia boleh dikendalikan seperti ini: apabila gambar tidak wujud, peristiwa onerror akan dicetuskan Kami boleh melakukan beberapa kerja pemulihan dalam acara ini, seperti:

<. 🎜>1. Biarkan Sembunyikan elemen gambar ini:

为了美观当网页图片不存在时不显示叉叉图片 src="图片的url地址" alt="图片XX" onerror="this.style.display=&#39;none&#39;"/>
Salin selepas log masuk

2. Gantikannya dengan gambar lalai:

为了美观当网页图片不存在时不显示叉叉图片 src="图片的url地址" alt="图片XX" 
onerror="this.src=&#39;默认图片的url地址&#39;"/>
Salin selepas log masuk

Nota: Jika digunakan secara tidak betul, ia akan menyebabkan gelung tak terhingga dalam pelayar berasaskan IE. Contohnya: Apabila [alamat url imej lalai] gagal dimuatkan (contohnya, apabila kelajuan rangkaian agak perlahan) atau tidak wujud, ia akan dimuatkan berulang kali, akhirnya menyebabkan ralat limpahan tindanan.

Oleh itu, dua kaedah berikut perlu digunakan untuk menyelesaikan masalah:

a onerror cukup kecil dan wujud.


b. Untuk mengawal peristiwa onerror yang akan dicetuskan sekali sahaja, anda perlu menambah ayat ini: this.onerror=null; >


为了美观当网页图片不存在时不显示叉叉图片 src="图片的url地址" alt="图片XX" 
onerror="this.src=&#39;默认图片的url地址;this.onerror=null&#39;"/>
Salin selepas log masuk
Selepas ujian, kaedah di atas disokong dalam semua versi pelayar IE dan Google dan Firefox.

Di atas ialah cara JavaScript menggunakan onerror untuk menetapkan paparan imej lalai dan bukannya teknik alt_javascript Untuk kandungan yang lebih berkaitan, sila perhatikan tapak web PHP Cina (www.php.cn)!

Label berkaitan:
sumber:php.cn
Kenyataan Laman Web ini
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
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan