webentwicklung-frage-antwort-db.com.de

jQuery: Prüfen Sie, ob ein Bild vorhanden ist

Ich lade einen Bildpfad über jQuery $ .ajax und bevor ich das Bild zeige, möchte ich prüfen, ob es tatsächlich existiert. Kann ich das Image load/ready -Ereignis oder ähnliches verwenden, um festzustellen, ob der Dateipfad gültig ist?

Nachdem .myimage für die Anzeige eingestellt ist: keine, hoffe ich, dass Sie so etwas tun

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

Ist so etwas möglich?

jqueryajaximagepathload
21
Marko

Nun, Sie können .error() handler binden.

so was,

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

na ja, deine ist schon okay mit load-event

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

das Problem dabei ist, wenn Javascript deaktiviert ist, wird das Bild nicht angezeigt ...

33
Reigel

Versuchen:

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
}

dann benutze

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

Ein alter Thread, den ich kenne, aber ich denke, er könnte verbessert werden. Ich habe festgestellt, dass OP intermittierende Probleme hat, die auf das Laden des Bildes und die gleichzeitige Fehlerprüfung zurückzuführen sind. Es ist besser, das Bild zuerst laden zu lassen und dann auf Fehler zu prüfen:

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

Da Sie bereits eine AJAX -Anforderung durchführen, würde ich diese an die serverseitige App auslagern, die Ihr AJAX unterstützt. Es ist einfach, zu prüfen, ob eine Datei vom Server vorhanden ist. In den zurückgesendeten Daten können Sie Variablen festlegen, um die Ergebnisse anzugeben.

4
Jeffrey Blake

Diese Frage ist ein paar Jahre alt, aber hier ist eine bessere Beispielanwendung für den Fehlerbehandler für jeden, der sich das anschaut.

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

Sie müssen den Error-Handler anhängen, bevor Sie versuchen, das Image zu laden, um das Ereignis abzufangen.

Quelle: http://api.jquery.com/error/

2
Chris

Das habe ich von mir gemacht:

$.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