Traiter les images manquantes en jQuery

Parmi la foultitude d'événements gérés par Javascript, il existe l'événement error. Son utilisation est assez obscure et manque un peu d'intérêt dans bien des cas. A tel point que l'équipe de jQuery a décidé d'en suspendre le support tout en livrant la méthode "en l'état" pour qui veut s'amuser avec.

Cet événement est applicable à l'objet window et image seulement et est déclenché, comme on peut s'en douter, lorsqu'une erreur intervient sur l'un de ces éléments. On laissera rapidement de côté l'objet window pour s'intéresser aux erreurs de l'objet image.

Quelques idées me viennent.

Faire disparaitre une image manquante

Pour ne pas polluer la page avec des images cassées, on les masque directement en cas de soucis. Cette idée est aussi donnée en exemple dans la documentation de jQuery.

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

Remplacer une image manquante par une autre

Plus en douceur, on pourra aussi remplacer les images manquantes par une autre image d'alerte.

$(function() {
    $('img').error(function(evt) {
        var src = $(this).attr('src');

        $(this)
        .attr('alt', 'Cette image manque')
        .attr('src', 'alerte-image-manquante.png');
    });
});

Lancer un script PHP lorsqu'une image est manquante

Lorsqu'une image est manquante, il est utile d'en être rapidement informé pour réparer les dégâts. Sur le même principe que l'exemple précédent, on remplace l'URL de l'image par une nouvelle. Mais juste avant on appelle un script PHP qui lancera un job particulier. Pour par exemple, prévenir le webmaster par email ou écrire des logs de ces erreurs...

$(function() {
    $('img').error(function(evt) {
        var src = $(this).attr('src');

        $(this)
        .attr('alt', 'Cette image manque')
        .attr('src', 'log.php?src='+src+'&ref='+document.location)
        .attr('src', 'image.png');
    });
});

Un script PHP est appelé. On y passe le chemin de l'image manquante (src) et le chemin de la page en question (document.location). Le script lancera un email (attention au flood sur les sites à fort trafic) et loggera l'erreur dans un fichier.

log.php

<?php
    $message = sprintf("%s '%s' manquant sur '%s' \n", 
        date('Y-m-d H:i:s'), 
        $_GET['src'], 
        $_GET['ref']
    );
    file_put_contents("log.txt", $message, FILE_APPEND);

    mail('admin@jaysalvat.com', 'Image manquante', $message);
?>

Ce qui donnera des logs de ce type et un envoi de mail du même message.

Logs

2009-06-30 12:55:40 'picture.png' manquant sur 'http://jaysalvat.com/index.html' 
2009-06-30 12:55:43 'picture.png' manquant sur 'http://jaysalvat.com/index.html' 
2009-06-30 12:56:12 'picture.png' manquant sur 'http://jaysalvat.com/index.html' 
2009-06-30 12:57:38 'picture.png' manquant sur 'http://jaysalvat.com/index.html'