Bonjour,

Je voudrais faire une fonction, ou en entrée j'ai une chaine de caractères comportant le lien vers une image, et en sortie un variable booléenne qui est à true si l'image existe et false sinon. Je patauge un peu là.

Merci

Michel

Bonjour,

Cette fonction devrait faire l'affaire, elle prend un paramètre une chaîne de caractère et retourne un booléen à vrai si l'image existe et faux si elle n'existe pas.

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

Salut

Je te déconseille d'utiliser ce code qui fait une requête en mode synchrone. Ça pourri la navigation

Tu devrais plutôt utiliser les propriétés onload et onerror des images et appeler une fonction de callback 

-
Edité par LCaba 3 décembre 2017 à 18:37:09

J'ai essayer cela mais cela ne marche pas:

function checkImg(image_url){
  var tester=new Image();
  tester.onload=function(){
    return true;
  }  
  tester.onerror=function(){
    return false;
  }  
  tester.src=image_url;
}

-
Edité par Michastro 4 décembre 2017 à 15:46:52

T'es pas loin du but. Mais tu peux pas utiliser de valeur de retour dans une exécution asynchrone. Par exemple, dans ton code en cas de succès, c'est pas checkImg() qui renvoie true, mais tester.onload(). 

Tu dois organiser ton code autrement en utilisant une callback :

function checkImg(image_url, whenTested) {
  var img = new Image();
  img.onload = function() {
    whenTested(true);
  };
  img.onerror = function() {
    whenTested(false);
  };
  
}

// exemple d utilisation :

checkImg('une_url.png', function(imgExists) {
  if (exists) {
    alert("L'image existes !");
  } else {
    alert("L'image n'a pas pu être chargée");
  }
});

-
Edité par LCaba 4 décembre 2017 à 16:23:17

Il ne faut pas remplacer if (exists) par if (imgExists)  ?

Bonsoir,

Ca ne marche pas bien. Mon but est de chargé une image avec un nom du type: nomHHMM.gif ou HHMM est l'heure en UTC. Pour trouver le nom pas de soucis, mais l'image arrive avec un retard de 1, 2 ou 3 minutes de retard, je teste donc l’existence de 3 images gif, une a utc-3min, une autre à UTC-2min et la derniere UTC-1min. Des que j'en ai une j'affiche. Si dans if (imgExists) je mets alert(... ça a l'air de marcher, je pense que c'est parceque cela fait une tempo, le temps que je clique sur ok, du coup le onload marche. Ou alors il faut que checkImg renvoit true sauf si on a un onerror??

J'ai essayé un truc comme cela, mais c'est pas mieux:

function checkImg(image_url, whenTested) {
  var img = new Image();
  img.onload = function() {
    whenTested(true);
  };
  img.onerror = function() {
    whenTested(false);
  };
  img.src=image_url;
  sleep(500);
  whenTested(true);
}
 
function sleep(miliseconds) {
  var currentTime = new Date().getTime();
  while (currentTime + miliseconds >= new Date().getTime()) {
  }
}

-
Edité par Michastro 5 décembre 2017 à 0:04:10

ça sert à rien de faire un chargement asynchrone si tu utilises un boucle while() pour faire une "pause" ! c'est pire.

la fonction que je t'ai fourni, t'es pas censé la modifier mais l'utiliser, par exemple :

checkImg('url1', function(exists) {
  if (exists) {
    imgElement.src = 'url1';
  } else {
    checkImg('url2', function(exists) {
      if (exists) {
        imgElement.src = 'url2';
      } else {
         // etc...
      }
    });
  }
});

Mais bon, c'est vite relou toutes ces imbrications. Voici un moyen simple de réaliser ce que tu veux :

var liste = [
	'https://www.dezonnegloed.be/src/Frontend/Files/Media/Images/400x400/WITBUIKEGEL.jpg',
  'https://s3.eu-central-1.amazonaws.com/zooparc/assets/stars/koala_400.jpg',
  'http://www.parcanimalierdauvergne.fr/wp-content/uploads/2016/01/animaux_aux_sommets.png'
];

var imgElement = document.getElementById('mon-image');

var img = new Image();
var i = 0;
// si l image existe, on l insère dans le DOM
img.onload = function() {
	imgElement.src = img.src;
};
// chaque fois qu une image peut pas etre
// chargée, on charge la suivante dans la
// liste :
img.onerror = function() {
	i++;
  if (i < liste.length) {
  	img.src = liste[i];
  }
};
// on essaie d abord avec la 1ere de la liste :
img.src = liste[i];

-
Edité par LCaba 5 décembre 2017 à 9:48:20

Bonjour,

Le problème est que la fonction "exist" ne marche pas à tous les coups et je ne sais pas pourquoi.

function checkImg(image_url, whenTested) {
  var img = new Image();
  img.onload = function() {
    whenTested(true);
  };
  img.onerror = function() {
    whenTested(false);
  };
  img.src=image_url;
}


/////dans la page:
var heureESO=heure;
var sub=4;
var minuteESO=minute-sub;
testheureminuteESO();
var nomESO='http://www.ls.eso.org/lasilla/dimm/current_'+FormatNumberLength(heureESO,2)+FormatNumberLength(minuteESO,2)+'.gif';
continu=true;
checkImg(nomESO, function(imgExists) {
  if (imgExists) {
    continu=false;
  } 
});
if (continu) {
  document.write("ici ");  
  sub=sub-1;
  heureESO=heure;
  minuteESO=minute-sub;;
  testheureminuteESO();
  nomESO='http://www.ls.eso.org/lasilla/dimm/current_'+FormatNumberLength(heureESO,2)+FormatNumberLength(minuteESO,2)+'.gif';
  checkImg(nomESO, function(imgExists) {
    if (imgExists) {
      continu=false;
    } 
  });
}
if (continu) {
  document.write("ici2 ");  
  sub=sub-1;
  heureESO=heure;
  minuteESO=minute-sub;;
  testheureminuteESO();
  nomESO='http://www.ls.eso.org/lasilla/dimm/current_'+FormatNumberLength(heureESO,2)+FormatNumberLength(minuteESO,2)+'.gif';
  checkImg(nomESO, function(imgExists) {
    if (imgExists) {
      continu=false;
    } 
  });
}
if (continu) {
  document.write("ici3 ");  
  sub=sub-1;
  heureESO=heure;
  minuteESO=minute-sub;;
  testheureminuteESO();
  nomESO='http://www.ls.eso.org/lasilla/dimm/current_'+FormatNumberLength(heureESO,2)+FormatNumberLength(minuteESO,2)+'.gif';
}
// on affiche le nomESO valide
document.write('<img  src='+nomESO+' width="800" height="600">');  

Sur la page web, j'ai les indicateurs "ici" "ici2" et "ici3" qui s'affiche et une image ou pas qui s'affiche, alors que dans les images précédentes testées il y en a des valides! Donc la fonction n'a pas l'air de marché correctement (j'ai remis comme initialement). Je ne comprends pas.

Pour info la page web est:

http://astrosurf.com/Team-Janus/meteo/

Et c'est la toute dernière image en bas qui pose problème.

Merci de ton aide très précieuse.

-
Edité par Michastro 5 décembre 2017 à 11:24:43

Tu n'as pas compris le principe de l'exécution asynchrone. Qaund tu écris ça :

checkImg(nomESO, function(imgExists) {
  if (imgExists) {
    continu=false;
  }
});
if (continu) { 

La ligne 6 est exécutée AVANT les lignes 2-4 qui sont exécutée une fois que l'image est chargée.

Abandonne l'utilisation de document.write() c'est une pratique dépréciée

Comme je l'ai dit, je conseille plutot l'utilisation du 2nd code. Voici un exemple (ou plutot, la solution) : https://jsfiddle.net/b8fgurnw/6/ 

-
Edité par LCaba 5 décembre 2017 à 12:17:47

Déjà un énorme merci pour l'aide apporté, ensuite il va falloir que j'épluche en détail pour bien tout comprendre. Enfin j'utilisais le document.write() juste pour avoir des infos de débugage.

Michel

Bon j'avance bien, et j'ai abandonné document.write pour console.log, bien bien plus propre!!

Par contre, avec ton code, on arrive encore à des alert("L'image n'a
    pas pu être chargée"), ce qui semble dire que cela échoue sur les 100 adresses. Bizarre.

Cordialement

Michel

-
Edité par Michastro 7 décembre 2017 à 17:29:35

Sur mon exemple (https://jsfiddle.net/b8fgurnw/6/) ou quand tu essaies de l'implémenter sur ton site ? parce qu'avec mon script j'ai pas de souci, j'ai toujours l'image de la minute actuelle ou de la précédente. Le ?nocash=... est important, sans ça, si le navigateur a déjà échoué à charger l'image, il ne relance pas de requête pour la même url.

Edit, j'avais fait une erreur dans le nom d'une variable, c'est corrigé : https://jsfiddle.net/b8fgurnw/6/ 

-
Edité par LCaba 7 décembre 2017 à 18:19:43

J'avais oublié un s à un nom de variable dans mon setinterval

Donc le premier chargement marchait bien mais ensuite ça allait chercher une image encore plus ancienne à chaque fois parce que la variable était pas remise à zéro

L'utilisation du mode strict, qui oblige à déclarer toutes les variables m'aurait fait le rendre compte de cette erreur