Jquery y carga de imagenes

Yurisimo · #1 (**permalink**) 17/05/2011, 05:55

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/

tredio · #2 (**permalink**) 17/05/2011, 13:45

algo asi te podria servir

Código HTML:

Ver original<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Carga imagen</title>
<style>
    html,body{width:100%; height:100%; padding:0; margin:0;}
    .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);}
    img{display:none;}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
 
<script>
    $(document).ready(function(){
        $('img').load(function(){
            $('.loading').fadeOut('fast');
            $(this).css({ height:$('body').height(), width : $('body').width()}).fadeIn('slow');
        });
    });
</script>
</head>
 
<body>
<div class="loading"></div>
<img src="http://piliymili.files.wordpress.com/2008/09/skull_wallpaper_v2_by_lordzoltan.jpg" alt= "" />
</body>
</html>

Yurisimo · #3 (**permalink**) 19/05/2011, 08:34

Muchas gracias, es lo que necesitaba !!! :D:D:D

tredio · #4 (**permalink**) 19/05/2011, 09:40

me alegro que te haya funcionado, saludos.