Vérifier si l'image existe sans la charger

Question

J'utilise actuellement le script suivant dans une fonctionnalité de survol :

function UrlExists(url) {
    var http = new XMLHttpRequest();
    http.open('HEAD', url, false);
    http.send();
    return http.status!=404;
}

Il charge toutes les images l'une après l'autre, ce qui entraîne un ralentissement de tout le site Web (voire un plantage).

Existe-t-il un moyen de vérifier si une image existe mais empêcher son chargement (entièrement) en utilisant javascript ?

Merci beaucoup !

Answer 1

Étant donné que JavaScript (et donc jQuery) est côté client et que l'image réside côté serveur avant le chargement, il n'y a aucun moyen de vérifier si l'image existe sans utiliser Ajax ou votre script côté serveur pour s'assurer que l'image existe.

Answer 2

Il y a pas de manière de déterminer à l'aide de javascript ou de jQuery si une image existe sans chargement il.

solution de contournement :

La seule façon de vérifier si une image existe du côté du serveur serait d'essayer de charger l'image dans un fichier caché. div ou quelque chose comme ça, et vérifier si l'image est là ou pas, puis l'afficher.

ou vous pouvez utiliser un langage côté serveur de votre choix comme ( php, asp, jsp, python, etc ) et envoyer la requête à l'image au langage côté serveur (de préférence en utilisant AJAX) et laisser le script côté serveur vérifier si l'image existe ou non et renvoyer l'image si elle est présente ou envoyer un code d'erreur si elle n'est pas présente.

Answer 3

Ma solution :

function imageExists(url) {
    return new Promise((resolve, reject) => {
        const img = new Image(url);
        img.onerror = reject;
        img.onload = resolve;
        const timer = setInterval(() => {
            if (img.naturalWidth && img.naturalHeight) {
                img.src = ''; /* stop loading */
                clearInterval(timer);
                resolve();
            }
        }, 10);
        img.src = url;
    });
}

Exemple :

imageExists(url)
    .then(() => console.log("Image exists."))
    .catch(() => console.log("Image not exists."));

Answer 4

Voici comment vous pouvez vérifier si une image existe :

  function checkImage(src) {
     var img = new Image();
     img.onload = function() {
     // code to set the src on success
  };
  img.onerror = function() {
// doesn't exist or error loading
 };

 img.src = src; // fires off loading of image
}

Voici une mise en œuvre fonctionnelle http://jsfiddle.net/jeeah/