Bagaimana untuk menyemak sama ada imej wujud dengan jquery-Soal Jawab bahagian hadapan-php.cn

Bagaimana untuk menyemak sama ada imej wujud dengan jquery

PHPz

Lepaskan： 2023-04-07 14:26:04

asal

1177 orang telah melayarinya

Untuk tapak web yang perlu memaparkan imej, kami mungkin menyimpan laluan imej dalam pangkalan data atau dalam data yang dikembalikan melalui API. Apabila kita perlu memaparkan imej pada halaman, kadangkala kita menghadapi situasi di mana imej tidak wujud Pada masa ini, paparan imej kosong pada halaman akan membawa pengalaman buruk kepada pengguna. Untuk meningkatkan pengalaman pengguna, kami boleh menggunakan jQuery untuk menyemak sama ada imej itu wujud dan memprosesnya dengan sewajarnya.

1. Gunakan jQuery untuk menyemak sama ada imej itu wujud

Kami boleh menggunakan kaedah .load() untuk mengesan sama ada imej berjaya dimuatkan. Kaedah .load() mencetuskan peristiwa apabila elemen yang dipilih telah selesai dimuatkan. Jika imej berjaya dimuatkan, peristiwa pemuatan akan dicetuskan; jika tidak, peristiwa ralat akan dicetuskan, seperti yang ditunjukkan di bawah:

$('img').on('load', function() {
  console.log('Image is loaded');
}).on('error', function() {
  console.log('Image is not loaded');
});

Salin selepas log masuk

Dalam contoh di atas, kami mula-mula memilih semua elemen imej, dan kemudian dengar beban dan acara ralat mereka, keluarkan "Imej dimuatkan" apabila imej berjaya dimuatkan, jika tidak, keluarkan "Imej tidak dimuatkan".

2. Mengendalikan situasi apabila gambar tidak wujud

Apabila kami mengesan bahawa gambar itu tidak wujud, kami boleh mengendalikannya dengan cara berikut:

Paparkan gambar Lalai

Apabila gambar tidak wujud, kita boleh menambah gambar lalai "tiada gambar" untuk setiap gambar dalam tapak web. Apabila ia dikesan bahawa imej itu tidak wujud, kita boleh memaparkan imej lalai dengan mengubah suai atribut src bagi elemen imej Kod adalah seperti berikut:

$('img').on('error', function() {
  $(this).attr('src', 'default.jpg');
});

Salin selepas log masuk

Dalam kod di atas, apabila ia adalah. mengesan bahawa imej itu tidak wujud, kami akan Atribut src elemen diubah suai kepada lalai.jpg untuk memaparkan imej lalai.

Paparkan gesaan kegagalan pemuatan imej

Kami juga boleh memaparkan teks gesaan di lokasi imej apabila pemuatan imej gagal menggesa pengguna bahawa imej yang dipaparkan pada masa ini gagal memuatkan. Kodnya adalah seperti berikut:

$('img').on('error', function() {
  $(this).after('<p class="load-error">图片加载失败</p>');
});

Salin selepas log masuk

Dalam kod di atas, kami menggunakan kaedah .after() untuk menambah

elemen selepas elemen imej untuk memaparkan teks gesaan untuk kegagalan pemuatan imej.

Sembunyikan bekas imej

Apabila imej tidak wujud, kita juga boleh menyembunyikan bekasnya (seperti

elemen) untuk menjadikan reka letak halaman lebih cantik . Kodnya adalah seperti berikut:

$('img').on('error', function() {
  $(this).parent().hide();
});

Salin selepas log masuk

Dalam kod di atas, apabila kami mengesan bahawa imej itu tidak wujud, kami menggunakan kaedah .parent() untuk memilih elemen induk bagi imej semasa, dan kemudian gunakan kaedah .hide() untuk menyembunyikannya berdiri.

3. Ringkasan

Dalam artikel ini, kami memperkenalkan kaedah menggunakan jQuery untuk menyemak sama ada imej wujud dan memprosesnya dengan sewajarnya. Apabila berhadapan dengan situasi di mana imej tidak wujud, kami boleh memaparkan imej lalai, kandungan segera atau menyembunyikan bekas mengikut keperluan sebenar untuk meningkatkan pengalaman pengguna dan reka letak halaman.

Atas ialah kandungan terperinci Bagaimana untuk menyemak sama ada imej wujud dengan jquery. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!