Artículos
jQuery

Eliminar imágenes rotas con jQuery

12/Oct/2010

Algo demasiado habitual como los errores de codificación, dependencias acopladas a enlaces externos,… pueden dar al traste con el diseño de nuestras páginas web.

Y es que cualquiera de los puntos citados anteriormente pueden hacer que tengamos imágenes rotas en nuestra página, las cuales estropeen el contenido de las mismas.

Si bien, mediante sencillos scripts podemos eliminar imágenes rotas con jQuery. La idea es recorrer todas las imágenes que haya en la página y si la imagen tiene un error, eliminarla.

Lo primero es saber como acceder a las imágenes mediante jQuery. Para ello utilizamos el siguiente código:

$("img")

El selector pasado a la función $ es el del elemento IMG. Como queremos saber si se ha producido un error en la carga de la imagen pasaremos a tratar el evento .error().

$("img").error(...);

Dentro de la gestión del evento .error() tomaremos la decisión sobre qué hacer. En este caso, como vamos a eliminar las imágenes rotas, llamaremos al método .remove() de jQuery.

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

Este código lo tendremos que ejecutar cuándo se haya cargado la página. Es decir, en el método .ready().

 $(document).ready(function(){
   $('img').error(function() {
     $(this).remove();
   }) 
 });

Código Fuente

Descárgate el código fuente de Eliminar imágenes rotas con jQuery
Y si te ha gustado nuestro código fuente puedes regalarnos una estrella Star
Suscribir
Notificar de
guest
1 Comentario
Recientes
Anteriores Más votados
Opiniones integradas
Ver todos los comentarios