Foros del Web » Programando para Internet » Jquery »

Jquery y carga de imagenes

Estas en el tema de Jquery y carga de imagenes en el foro de Jquery en Foros del Web. Hola muy buenas. Como podria cargar imagenes que pasasen de opacidad 0 a 1. Es decir, en la web que estoy haciendo, al ir a ...
  #1 (permalink)  
Antiguo 17/05/2011, 05:55
 
Fecha de Ingreso: julio-2009
Mensajes: 111
Antigüedad: 12 años, 6 meses
Puntos: 0
Jquery y carga de imagenes

Hola muy buenas.

Como podria cargar imagenes que pasasen de opacidad 0 a 1.

Es decir, en la web que estoy haciendo, al ir a otra pagina de fondo tengo una foto a pantalla completa, y me gustaria que se cargara con un efecto que durase 2 segundos y que pasara de 0 a 1.

Por ejemplo como en la web de Zara.

http://www.zara.com/
  #2 (permalink)  
Antiguo 17/05/2011, 13:45
Avatar de tredio  
Fecha de Ingreso: noviembre-2008
Ubicación: Carabobo
Mensajes: 466
Antigüedad: 13 años, 1 mes
Puntos: 66
Respuesta: Jquery y carga de imagenes

algo asi te podria servir


Código HTML:
Ver original
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  4. <title>Carga imagen</title>
  5.     html,body{width:100%; height:100%; padding:0; margin:0;}
  6.     .loading{ position:absolute; width:54px; height:55px; left:50%; top:50%; margin-left:-27px; margin-top:-27px; background:url(http://bocadepiano.com/comunidad/templates/tmpl_uni/images/loading.gif);}
  7.     img{display:none;}
  8. <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
  9.  
  10.     $(document).ready(function(){
  11.         $('img').load(function(){
  12.             $('.loading').fadeOut('fast');
  13.             $(this).css({ height:$('body').height(), width : $('body').width()}).fadeIn('slow');
  14.         });
  15.     });
  16. </head>
  17.  
  18. <div class="loading"></div>
  19. <img src="http://piliymili.files.wordpress.com/2008/09/skull_wallpaper_v2_by_lordzoltan.jpg" alt= "" />
  20. </body>
  21. </html>
__________________
Extension Google Chrome
dar las gracias no cuesta nada :D
  #3 (permalink)  
Antiguo 19/05/2011, 08:34
 
Fecha de Ingreso: julio-2009
Mensajes: 111
Antigüedad: 12 años, 6 meses
Puntos: 0
Respuesta: Jquery y carga de imagenes

Muchas gracias, es lo que necesitaba !!! :D:D:D
  #4 (permalink)  
Antiguo 19/05/2011, 09:40
Avatar de tredio  
Fecha de Ingreso: noviembre-2008
Ubicación: Carabobo
Mensajes: 466
Antigüedad: 13 años, 1 mes
Puntos: 66
Respuesta: Jquery y carga de imagenes

me alegro que te haya funcionado, saludos.
__________________
Extension Google Chrome
dar las gracias no cuesta nada :D

Etiquetas: carga, imagenes
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 14:54.