jQuery: gestire gli errori delle immagini

Le immagini in JavaScript non sono solo elementi del DOM ma anche oggetti particolari. Un evento associato alle immagini è l'evento error, che solitamente si innesca quando il browser non riesce a caricare l'immagine specificata (per esempio se l'URL è sbagliato). Possiamo usare jQuery per gestire questa eventualità. Vediamo come.

Possiamo ad esempio sostituire l'immagine mancante con un'immagine predefinita:

$('img').error(function(){
        $(this).attr('src', 'default.png');
});

O nasconderla del tutto:

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

Infine, potremmo usare AJAX per avvisare il gestore del sito via e-mail:

$('img').error(function() {

	var $img = $(this),
		parent = $img.parent(),
		parentContent = parent.html(),
		message = "L'immagine contenuta in \n\n" + parentContent + '\n\n non è disponibile.',
		title = 'Errore nel caricamento delle immagini';
		
	$.ajax({
		type: 'POST',
		url: 'logger.php',
		data: 'title=' + encodeURIComponent(title) + '&message=' +	
			   encodeURIComponent(message),
		success: function() {}
	});
		 


});

Ovviamente lo script lato server può anche essere concepito per eseguire il logging dell'errore senza utilizzare l'invio e-mail.