web-dev-qa-db-fra.com

jQuery: vérifie si l'image existe

Je charge un chemin d’image via jQuery $ .ajax et avant de montrer l’image, je voudrais vérifier si elle existe réellement. Puis-je utiliser l'événement load/ready ou quelque chose de similaire pour déterminer que le chemin du fichier est valide?

Avoir .myimage configuré pour afficher: aucun, j'espère faire quelque chose comme

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

Est-ce que quelque chose comme ça est possible?

jqueryajaximagepathload
21
Marko

Eh bien, vous pouvez lier .error() handler ...

comme ça,

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

bien, le vôtre est déjà d'accord avec load-event

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

le problème avec ceci est que si Javascript était désactivé, l'image ne s'afficherait jamais ...

33
Reigel

Essayer:

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
}

puis utiliser

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

Un vieux fil que je connais mais je pense qu’il pourrait être amélioré. J'ai remarqué que OP avait des problèmes intermittents qui pourraient être dus au chargement de l'image et à la vérification d'erreur simultanément. Il serait préférable de laisser l'image se charger en premier, puis de rechercher les erreurs:

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

Puisque vous faites déjà une demande AJAX, je la déchargerais sur l'application côté serveur qui prend en charge votre AJAX. Il est facile de vérifier si un fichier existe sur le serveur et vous pouvez définir des variables dans les données que vous renvoyez pour spécifier les résultats.

4
Jeffrey Blake

Cette question date de quelques années, mais voici un meilleur exemple d'utilisation du gestionnaire d'erreurs pour tous ceux qui s'y intéressent.

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

Vous devez attacher le gestionnaire d'erreurs avant d'essayer de charger l'image afin d'attraper l'événement.

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

2
Chris

Voici ce que j'ai fait de moi:

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