JavaScript を使用して画像がサーバー上に存在するかどうかを確認するにはどうすればよいですか?

JavaScript を使用してサーバー上のイメージの存在を確認する方法

サーバー上にリソースが存在するかどうかを確認することは、次のような多くの Web アプリケーションで重要です。画像を動的にロードします。 JavaScript を使用してこれを実現する方法を見てみましょう。

問題:

HTML ページに複数の画像 (例: 1.jpg から 5.jpg) が埋め込まれており、追加の画像 (例: 6.jpg) がサーバー上で利用可能かどうかを定期的に確認したい。これを実現するには、JavaScript 関数を毎分呼び出して次のチェックを実行する必要があります。

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

解決策:

画像がサーバーでは、次の JavaScript を利用できます。コード:

function imageExists(image_url){

    var http = new XMLHttpRequest();

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

    return http.status != 404;

}

説明:

このコード スニペットは、XMLHttpRequest オブジェクトを使用して、指定された画像 URL に HTTP HEAD リクエストを送信します。 HEAD リクエストは、リソースに関連付けられた HTTP ステータス コードを返し、リソースが存在するかどうかを示します。ステータス コード 200 または 304 はリソースが存在することを示し、ステータス コード 404 はリソースが存在しないことを示します。

代わりに、jQuery 実装を使用することもできます。

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

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

    })

この jQuery アプローチもまた、 HTTP GET リクエストを実行し、サーバーの応答に基づいて指定されたコールバックを実行します。

以上がJavaScript を使用して画像がサーバー上に存在するかどうかを確認するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。