web-dev-qa-db-ja.com

jQuery：画像が存在するかどうかを確認する

JQuery $ .ajaxを介して画像パスを読み込んでいます。画像を表示する前に、画像が実際に存在するかどうかを確認したいと思います。画像の読み込み/準備完了イベントなどを使用して、ファイルパスが有効であることを確認できますか？

.myimageを表示するように設定：なし、次のようなことを望んでいます

$(".myimage").attr("src", imagePath);
$(".myimage").load(function() {
    $(this).show();
});

そのようなことは可能ですか？

jqueryajaximagepathload
22
Marko

まあ、あなたはバインドできます .error() ハンドラ...

このような、

$(".myimage").error(function(){
  $(this).hide();
});

まあ、あなたはすでに load-event で大丈夫です

$(".myimage").load(function() {
    $(this).show();
});

これの問題は、JavaScriptが無効になっている場合、画像が表示されないことです...

34
Reigel

試してください：

function urlExists(testUrl) {
 var http = jQuery.ajax({
    type:"HEAD",
    url: testUrl,
    async: false
  })
  return http.status;
      // this will return 200 on success, and 0 or negative value on error
}

次に使用します

if(urlExists('urlToImgOrAnything') == 200) {
    // success
}
else {
    // error
}
21
Aamir Afridi

古いスレッドですが、改善できると思います。 OPに断続的な問題が発生していることに気付きました。これは、イメージのロードとエラーチェックの同時実行が原因である可能性があります。最初に画像をロードしてから、エラーを確認することをお勧めします。

$(".myimage").attr("src", imagePath).error(function() {
    // do something
});
6
superjaz1

AJAX=リクエストを既に実行しているので、AJAXをサポートしているサーバー側アプリにこれをオフロードします。サーバーからファイルが存在するかどうかを確認するのは簡単です。結果を指定するために送り返すデータに変数を設定できます。

4
Jeffrey Blake

この質問は2年前のものですが、これを見る人のためのエラーハンドラのより良い使用例を次に示します。

$("img")
  .error(function(){
    $(this).hide();
  })
  .attr("src", "image.png");

イベントをキャッチするためにイメージをロードする前に、エラーハンドラーをアタッチする必要があります。

ソース： http://api.jquery.com/error/

2
Chris

これは私がやったことです：

$.get( 'url/image', function(res){ 
    //Sometimes has a redirect to not found url
    //Or just detect first the content result and get the a keyword for 'indexof'
    if ( res.indexOf( 'DOCTYPE' ) !== -1 )  {
        //not exists
    } else {
        //exists
    }
});
0
ruel