Las imágenes rotas es algo que hay que reparar urgentemente en una web lo antes posible. Esto es debido a que dañan la imagen del proyecto y producen poca credibilidad. No hay nada que se vea peor que el que se muestre una imagen que no existe en el servidor. Por lo menos ahora no muestra nada, pero cuando yo empecé en esto del desarrollo web se veía un pequeño icono con una X roja que era todavía más alarmante. Por el contrario, como ahora no muestra nada, es posible que para los usuarios menos detallistas pase desapercibido. De todas maneras, es algo a evitar y si contamos con una funcionalidad que nos avise de estos problemas, pues mejor que mejor, ¿verdad?
Es posible por medio de jQuery y PHP implementar este tipo de medida, os explico. La idea es que el Javascript, esta vez utilizando la librería jQuery, rastree la página en busca de imágenes cuyo src está erróneo. El código JS, por medio de AJAX, conectará con un fichero PHP que será el encargado de enviarnos un mail para avisarnos de la imagen rota. ¿Lo has comprendido? Pues vamos a por el código.
El PHP
if(isset($_POST['image']))
{
$to = '[email protected]';
$from = '[email protected]';
$subject = 'Imagen rota';
$content = "Hemos detectado una imagen rota en tu sitio webnnRuta de imagen rota: ".stripslashes($_POST['image'])."nnReferenciada en la pagina: ".stripslashes($_POST['page']);
$result = mail($to,$subject,$content,'From: '.$from."rn");
die($result);
}
Como véis, en el PHP he desarrollado el típico script para enviar un correo. Para que esto funcione necesito de dos parámetros, la imagen $_POST['image'], y la página desde donde se ha avisado que existe una imagen rota $_POST['page']. Con estos dos parámetros ya podemos hacer el envío del mail que nos alarma que algo no está funcionando como debería.
El Javascript jQuery
$(document).ready(function() {
$('img').error(function() {
$.post('ajax-image-error-jquery.php', {
image: $(this).attr('src'),
page: window.location.href
}, function() {
//hide the image?
});
});
});
Para cada una de las imágenes que conforma la página en la que nos encontramos, escuchamos el evento de error. Cuando localizamos una imagen dañada, se envía una petición AJAX al script PHP que has podido ver más arriba.
Y este ha sido el artículo en el que trataba explicaros cómo enviar notificaciones por email de imágenes rotas utilizando jQuery AJAX, esperamos que te haya gustado y sepas aplicarlo en tus futuros proyectos. Ya sabes que si nos quieres proponer un tema que quieres ver reflejado como un tutorial o como una práctica, solo tienes que hacer uso del área de comentarios de un poco más abajo. Por el contrario, si quieres enviarnos tus propios tutoriales, puedes hacerlo a través de la intranet de usuarios que está habilitada para ello, a través del menú Enviar Tutorial. Ya sabes, ayúdanos a crecer con tus conocimientos. ¡Un saludo y feliz código!