Hacer que las imágenes se desvanezcan en la carga de imágenes usando jquery

Question

Tengo una página llena de imágenes y quiero que cada una de ellas se desvanezcan cuando se carguen. Tengo el siguiente código que funciona pero parece defectuoso, básicamente, a veces no toda la imagen se desvanece.

¿Alguien tiene alguna sugerencia de cómo mejorar esto.

Gracias

$('.contentwrap img').hide().load(function() { 
    $(this).fadeIn(1000); 
}); 

Answer 1

son usted que llama esa función en el document.ready?

$(document).ready(function() { 
     // put all your jQuery goodness in here. 
    }); 

http://www.learningjquery.com/2006/09/introducing-document-ready

Answer 2

no

a veces todo el fundido de imagen en

Sí, esto es normalmente un problema bastante básico:. Algunas imágenes terminen de cargarse antes de que les haya asignado una carga controlador de eventos. Esto es especialmente probable cuando las imágenes están en caché.

Si las imágenes están en el HTML de la única manera confiable es, por desgracia, para incluir una (muy feo) atributo inline onload:

<img src="..." alt="..." onload="$(this).fadeIn();"> 

Answer 3

Usted podría asegurarse primero de que sus imágenes están ocultas por defecto (eliminando la necesidad de sus jQuery hide llamadas) con un poco de CSS,

.contentwrap img { 
    display:none; 
} 

Y luego, en su document.ready, puede probar lo siguiente. Admitiré que habrá algunas redundancias aquí en que algunas imágenes pueden (detrás de las escenas) intentar desvanecerse dos veces, pero el resultado final será el mismo. Esta es la compensación que voy a admitir al tratar de dar una respuesta simple a esto.

La situación será que, en su documento, ya se hayan cargado algunas imágenes (especialmente las que ya estaban en la memoria caché) y algunas aún pueden estar pendientes.

// fade in images already loaded: 
$('.contentwrap img').fadeIn(1000); 
// and tell pending images to do the same, once they've finished loading: 
$('.contentwrap img').load(function() { 
    $(this).fadeIn(1000); 
}); 

Desde jQuery "apilar" los efectos de animación, una vez que algo se desvaneció por completo en, puede llamar fadeIn en él de nuevo, y nada debe (visible) a pasar.

Si esto fuera inaceptable, probablemente podría idear una forma más compleja de comprobar qué imágenes se han desvanecido y cuáles no, antes de establecer el evento de carga en ellas.

Buena suerte!

Answer 4

Hace poco resolví este desastre. Le respondí esta pregunta similar, pero no es exactamente lo que estás pidiendo ...

Get the real width and height of an image with JavaScript? (in Safari/Chrome)

Answer 5

poner su código dentro de esta función. Si usa $ (documento) funciona tan pronto como se carga el dom. Si usa el cuerpo, comienza una vez que el cuerpo está completamente cargado. De esta manera, sus imágenes se desvanecerán siempre después de que se cargue el cuerpo.

$('body').ready(function() { 
    //your code here 
}); 

Answer 6

acabo respondieron a esta encima en este tema: jQuery How do you get an image to fade in on load?

Obras para mí!

Answer 7

Para tratar con las imágenes en caché, la solución de bobince funciona, pero como dijo, es bastante fea.

Otra solución sería la de ocultar sus imágenes en CSS y utilizar el siguiente javascript:

$(window).load(function(){ 
    $('.contentwrap img').not(':visible').fadeIn(1000); 
}); 

function showImages() { 
    $('.contentwrap img').load(function() { 
     $(this).fadeIn(1000); 
    }); 
}); 

showImages(); 

De esta manera, la mayoría de las imágenes se cargan correctamente, y si se almacenan en caché, y ocultos de inmediato (la función de carga no teniendo tiempo para ser despedido), el evento de carga de la página hará que aparezcan. El evento de carga de la página garantiza que todo se haya cargado.

Answer 8

Es posible que el evento de carga no se active si la imagen se carga desde el caché del navegador. Para tener en cuenta esta posibilidad, podemos probar el valor de la propiedad .complete de la imagen.

$(document).ready(function() { 

    $('img').hide(); 
    $('img').each(function(i) { 
     if (this.complete) { 
      $(this).fadeIn(); 
     } else { 
      $(this).load(function() { 
       $(this).fadeIn(); 
      }); 
     } 
    }); 
}); 

Answer 9

Coloque este fragmento de código en la sección del sitio:

<script> 
     $('body').ready(function() { 

     $('img').hide(); 
     $('img').each(function(i) { 
      if (this.complete) { 
       $(this).fadeIn(); 
      } else { 
       $(this).load(function() { 
        $(this).fadeIn(2000); 
       }); 
      } 
     }); 
    }); 
</script> 

Ésta no puede ser la solución más elocuente, pero hace el trabajo. Si desea ver un ejemplo de esto en acción, revise este site para el que lo usé.

Answer 10

Utilizo la genial secuencia de comandos de David DeSandro para comprobar si las imágenes se han cargado. (por ejemplo, puede escribir una función que añade una clase a las imágenes cargadas, por lo que se desvanecen en el uso de transición css comprobarlo:.
http://desandro.github.io/imagesloaded/

Answer 11

Usted podría tomar todas las imágenes y ponerlas en una imagen y desvanezca eso, pero luego todos entran al mismo tiempo, y será un archivo grande. Depende de lo que quiera usar.