Eliminar imágenes rotas con jQuery

12/Oct/2010 jQuery , 1 Comentario
programación jquery en español

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


¿Algo que nos quieras comentar?

Déjanos tu comentario, no te preocupes que tu email no será publicado

*

*