Bagaimana untuk Semak sama ada Imej Wujud pada Pelayan dengan JavaScript?

Cara Mengesahkan Kewujudan Imej pada Pelayan dengan JavaScript

Menyemak sama ada sumber wujud pada pelayan adalah penting dalam banyak aplikasi web, seperti memuatkan imej secara dinamik. Mari kita terokai cara untuk mencapai ini menggunakan JavaScript.

Masalah:

Anda mempunyai berbilang imej (cth., 1.jpg hingga 5.jpg) yang dibenamkan dalam halaman HTML anda dan ingin menyemak secara berkala sama ada imej tambahan (cth., 6.jpg) tersedia pada pelayan. Untuk mencapai matlamat ini, anda perlu memanggil fungsi JavaScript setiap minit untuk melakukan semakan berikut:

if "../imgs/6.jpg" exists:
    var nImg = document.createElement("img6");
    nImg.src = "../imgs/6.jpg";

Penyelesaian:

Untuk menyemak sama ada imej wujud pada pelayan, anda boleh menggunakan kod JavaScript berikut:

function imageExists(image_url){

    var http = new XMLHttpRequest();

    http.open('HEAD', image_url, false);
    http.send();

    return http.status != 404;

}

Penjelasan:

Coretan kod ini menggunakan objek XMLHttpRequest untuk menghantar permintaan HTTP HEAD kepada imej yang ditentukan URL. Permintaan HEAD mengembalikan kod status HTTP yang dikaitkan dengan sumber, menunjukkan sama ada ia wujud. Kod status 200 atau 304 menunjukkan bahawa sumber itu wujud, manakala kod status 404 menandakan ketiadaannya.

Sebagai alternatif, anda boleh menggunakan pelaksanaan jQuery:

$.get(image_url)
    .done(function() { 
        // Do something now you know the image exists.

    }).fail(function() { 
        // Image doesn't exist - do something else.

    })

Pendekatan jQuery ini juga melaksanakan permintaan HTTP GET dan melaksanakan panggilan balik yang ditentukan berdasarkan respons pelayan.

Atas ialah kandungan terperinci Bagaimana untuk Semak sama ada Imej Wujud pada Pelayan dengan JavaScript?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!