xUMi.fr

Vous avez peut être déja du charger des images d'un serveur distant. Sans pouvoir forcement être sur qu''il n'y aura pas de lien mort.

Pour résoudre ce problème, il existe des solutions, mais rien de très clair, et surtout, pas franchement Cross Browser.

Différentes pistes se dégagent de mes recherches sur le net :

• L'attribut complete d'une image, qui devrait typiquement vous indiquer si l'image a fini d'être chargée. Mais la vie est triste, et même en cas d'erreur, votre browser se contentera de ça et complete passera à true. Pas très utile pour nous donc.
• L'évenement js onerror qui répond à nos besoins, mais qui n'est pas compatible Safari. Nous allons tout de même pousser dans ce sens, car jQuery est magique.

L'idée est donc d'utiliser la fonction jQuery error afin de spécifier une fonction a appliquer sur les images qui ne se chargent pas. Mais vu que dès que l'on ajoute une image à la page elle commence a se charger, il faut un peu feinter...

Etape 1 :

Nous ajoutons notre image à la structure html

var imgSrc = 'http://camarchepas.com';
var imgAlt = 'Cette image ne va pas s'afficher correctement';
$("body").append('<img id="img01" alt="'+imgAlt+'" />');

Ceux qui auront suivi se seont forcement demandé pourquoi je n'ai pas spécifié d'attribut src. Simplement parce qu'en ajoutant cet attribut, le chargement de l'image va débuter. Mais nous n'avons pas encore placé notre écouteur error ! C'est le moment de le faire : $('img#img01').error(imgError);

Maintenant, lorsqu'une image se chargera, mais sans être valide, la fonction imgError sera appelée.

functionimgError(){
  $(this).remove();
}

Ici nous allons donc supprimer toutes les images qui produiront une erreur. Vous pouvez également modifier leur attribut src afin d'afficher une image de votre choix, comme une image d'erreur.

Maintenant que tout est en place, nous n'avons plus qu'a ajouter notre attribut src a notre belle image. Elle se chargera et si tout se passe bien elle s'affichera, dans le cas contraire elle sera supprimée ! (la pauvre, tout de même)

$('img#img01').attr('src',imgSRC);

Plutot simple non ?

Et là où tout devient plus interessant : ce procédé, grâce à jQuery, est compatible IE7, Firefox3, Opéra ET Safari.