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中文网
PHP中文网asal
2016-05-16 15:12:591554semak imbas

Kod JavaScript

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

kod html

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

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;"/>

2. Gantikannya dengan gambar lalai:

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

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;"/>
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)!

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