Gunakan javascript untuk menentukan sama ada imej itu wujud_Jika ia tidak wujud, paparkan kod imej lalai

Dalam laman web atau aplikasi, kadangkala kita perlu memaparkan imej, tetapi kita tidak pasti sama ada imej itu wujud atau sama ada ia telah dipadamkan pada pelayan. Pada masa ini, jika imej dipaparkan secara langsung, ralat mungkin berlaku. Untuk menyelesaikan masalah ini, kita boleh menggunakan kod Javascript untuk menentukan sama ada imej itu wujud, dan memaparkan imej lalai jika imej itu tidak wujud. Artikel ini akan memperkenalkan cara menggunakan Javascript untuk melaksanakan fungsi ini.

Pertama, kita perlu membalut imej untuk dipaparkan dalam teg div atau img dan menetapkan atribut tersuai src-real dalam teg untuk menyimpan laluan sebenar imej. Kodnya adalah seperti berikut:

<div class="image-container">
  <img class="image" src="" src-real="path/to/image.jpg">
</div>

Seterusnya, kita boleh menggunakan Javascript untuk menentukan sama ada imej itu wujud. Menggunakan peristiwa onload dan onerror bagi objek Imej, fungsi pemprosesan peristiwa yang sepadan boleh dicetuskan apabila pemuatan imej selesai atau gagal. Kita boleh menetapkan atribut src imej kepada laluan sebenar src-real dalam acara penyiapan pemuatan onload untuk memaparkan imej src kepada laluan imej lalai dalam kejadian kegagalan pemuatan, seperti yang ditunjukkan di bawah:

// 获取所有要判断的图片节点
const images = document.querySelectorAll('.image')

// 循环遍历每个图片节点
images.forEach(image => {

  // 创建一个新的Image对象
  const img = new Image()

  // 加载完成，显示实际图片
  img.onload = () => {
    image.src = image.getAttribute('src-real')
  }

  // 加载失败，显示默认图片
  img.onerror = () => {
    image.src = 'path/to/default-image.jpg'
  }

  // 设置Image对象的src属性并加载图片
  img.src = image.getAttribute('src-real')
})

Dalam kod di atas, kami mula-mula mendapatkan semua nod imej untuk dinilai melalui kaedah querySelectorAll, dan gelung melalui setiap nod imej. Kemudian, kami mencipta objek Imej baharu dan menetapkan pengendali acara onload dan onerrornya. Apabila imej dimuatkan, peristiwa onload dicetuskan Kita boleh mendapatkan laluan sebenar src-real imej melalui kaedah getAttribute, dan menetapkan laluan kepada atribut src nod imej untuk memaparkan imej sebenar; gagal dimuatkan, Apabila peristiwa onerror dicetuskan, kita boleh menetapkan atribut src nod imej ke laluan imej lalai untuk memaparkan imej lalai.

Akhir sekali, kita perlu menetapkan gaya imej lalai dalam CSS supaya apabila imej gagal dimuatkan, imej lalai yang betul boleh dipaparkan. Kodnya adalah seperti berikut:

.image {
  width: 300px;
  height: 200px;
  background-color: #ddd;
}

.image[src*="default"] {
  background-image: url('path/to/default-image.jpg');
  background-size: cover;
  background-repeat: no-repeat;
}

Dalam kod di atas, kami mula-mula menetapkan lebar, ketinggian dan warna latar belakang imej. Kemudian, kami menggunakan pemilih atribut CSS [src*="default"] untuk memilih semua nod imej yang mengandungi "lalai" dalam atribut src, dan kemudian menetapkan imej latar belakang nod imej ke laluan imej lalai, jadi untuk memaparkan kesan Gambar lalai.

Ringkasnya, kita boleh menggunakan kod Javascript untuk menentukan sama ada imej itu wujud dan memaparkan imej lalai apabila imej itu tidak wujud. Ini boleh meningkatkan pengalaman pengguna dan mengurangkan situasi ralat yang disebabkan oleh kegagalan memuatkan imej.

Atas ialah kandungan terperinci Gunakan javascript untuk menentukan sama ada imej itu wujud_Jika ia tidak wujud, paparkan kod imej lalai. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!