jquery menetapkan gambar lalai

Dalam reka bentuk web, selalunya perlu memasukkan gambar ke dalam halaman untuk memperkaya kandungan halaman dan meningkatkan pengalaman pengguna. Walau bagaimanapun, dalam pembangunan sebenar, masalah seperti kegagalan memuatkan imej dan tidak wujud pasti akan berlaku, dan imej kosong pada halaman sering menjejaskan persepsi pengguna. Untuk menyelesaikan masalah ini, kami boleh meningkatkan pengalaman pengguna dengan menetapkan imej lalai Untuk ini, kami boleh menggunakan perpustakaan jQuery. Mari kita lihat lebih dekat cara menggunakan jQuery untuk menetapkan imej lalai.

1. Muatkan perpustakaan jQuery

Pertama sekali, kita perlu memperkenalkan perpustakaan jQuery ke dalam fail HTML digunakan di sini untuk memperkenalkan perpustakaan jQuery Sudah tentu Ia juga boleh diperkenalkan secara tempatan.

2. Tetapkan imej lalai

Seterusnya, kita perlu menetapkan imej lalai dalam halaman HTML. Dalam projek sebenar, kita boleh menetapkan gambar dengan saiz yang sesuai dan kandungan yang sepadan sebagai gambar lalai mengikut keperluan. Sebagai contoh, kita boleh menambah kod HTML berikut pada kod:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

Default.jpg di sini ialah imej lalai yang kami tetapkan.

3. Gunakan jQuery untuk menetapkan imej lalai

Seterusnya, mari kita lihat cara menggunakan perpustakaan jQuery untuk menetapkan imej lalai.

Semak sama ada imej berjaya dimuatkan

Kita perlu menyemak sama ada imej berjaya dimuatkan dahulu. Jika imej berjaya dimuatkan, imej itu sendiri dipaparkan jika imej gagal dimuatkan, imej lalai yang kami tetapkan sebelum ini digunakan. Kodnya adalah seperti berikut:

<img src="default.jpg" alt="默认图片">

$('img') di sini bermaksud memilih semua imej, dan kaedah each()nya bermaksud melintasi setiap elemen. Apabila imej tidak berjaya dimuatkan, gunakan kaedah attr() untuk menukar atribut src imej kepada imej lalai yang kami tetapkan.

Gunakan mendengar acara

2. Kami juga boleh menggunakan mendengar acara untuk melaksanakan operasi pemuatan imej yang berjaya dan gagal Kodnya adalah seperti berikut:

rreee

The $ here ('img') bermaksud memilih semua gambar dan menggunakan kaedah on() untuk mendengar peristiwa ralat gambar. Apabila peristiwa dicetuskan, gunakan kaedah attr() untuk menukar atribut src imej kepada imej lalai yang kami tetapkan.

Perlu diingatkan bahawa kedua-dua kaedah di atas boleh digunakan, tetapi kaedah kedua perlu dilaksanakan hanya apabila terdapat ralat dalam pemuatan imej, manakala kaedah pertama boleh dilakukan sebelum imej dimuatkan Tetapkan gambar lalai.

4. Ringkasan

Setakat ini, kami telah menyelesaikan operasi menggunakan jQuery untuk menetapkan imej lalai. Dengan cara ini, walaupun terdapat ralat memuatkan imej, pengalaman pengguna boleh dijamin dengan lebih baik dan halaman boleh dibuat lebih lengkap dan cantik. Dalam projek sebenar, kami boleh menggunakan kaedah ini secara fleksibel untuk meningkatkan pengalaman pengguna tapak web mengikut keperluan dan keadaan tertentu.

Atas ialah kandungan terperinci jquery menetapkan gambar lalai. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!