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

JavaScript を使用したサーバー上の画像の可用性の検出

多くの場合、サーバー上に画像などのリソースが存在することを確認する必要があります。この記事では、JavaScript を使用してサーバー上に画像が存在するかどうかを確認する方法について説明します。

解決策:

画像がサーバー上に存在するかどうかを確認するには、JavaScript の XMLHttpRequest を利用できます。 (XHR) オブジェクトを使用して HEAD リクエストを送信します。 HEAD リクエストは、実際のコンテンツをダウンロードせずに、指定されたリソースの HTTP ヘッダーを取得します。 HTTP ステータス コードが 404 (見つからない) でない場合は、画像がサーバー上に存在することを示します。

このソリューションを実装する 1 つの方法は次のとおりです。

function imageExists(image_url) {
  var http = new XMLHttpRequest();

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

  return http.status != 404;
}

jQuery を使用すると、解決策を簡略化できます:

$.get(image_url)
  .done(function() {
    // Do something now you know the image exists.
  })
  .fail(function() {
    // Image doesn't exist - do something else.
  })

例:

このメソッドを使用するには、スクラッチ コードを次のように置き換えることができます:

if (imageExists("../imgs/6.jpg")) {
  var nImg = document.createElement("img6");
  nImg.src = "../imgs/6.jpg";
}

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