Eliminar imágenes rotas con jQuery

12/Oct/2010 jQuery , 1 Comentario

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:

  1. $("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().

  1. $("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.

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

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

  1. $(document).ready(function(){
  2. $('img').error(function() {
  3. $(this).remove();
  4. })
  5. });

Vídeos sobre jQuery


Difunde el Conocimiento

Si te ha gustado el artículo o te ha sido de utilidad, no dejes de compartirlo con tus amigos en las redes sociales... Te estaremos muy agradecidos. :-D