Foros del Web - Ver Mensaje Individual

Naahuel · #3 (**permalink**) 22/04/2012, 20:33

Probá algo así:

Código Javascript:

Ver original// Precargar imagen
            src_imagen = '%inserta url%';
            imagenPreCargada = new Image(); 
            imagenPreCargada.src = src_imagen;
            
            // Obtener elemento de imagen, darle su SRC y ocultarlo
            $img = $('img').hide().attr('src',src_imagen);
            
            //cuando la imagen termine de cargar, mostrar la imagen con efecto
            $(imagenPreCargada).load(function(){
                $img.fadeIn();
            });

Ejemplo funcionando:

Código HTML:

Ver original<!DOCTYPE html>
<html>
<head>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
    <script type="text/javascript">
        $(function(){
            // Precargar imagen
            src_imagen = 'http://nahueljose.com.ar/upload/uploads/homero.gif?' + Math.random()*99999 //emular URL diferente, ignora esto. 
            imagenPreCargada = new Image(); 
            imagenPreCargada.src = src_imagen;
            
            // Obtener elemento de imagen y ocultarlo
            $img = $('img').hide().attr('src',src_imagen);
            
            //cuando la imagen termine de cargar, mostrar la imagen con efecto
            $(imagenPreCargada).load(function(){
                $img.fadeIn();
            });
        });
    </script>
    <title>Test</title>
</head>
<body>
    <!-- -->
    <img />
</body>
</html>

Creo que el script se explica por si mismo. Espera a que la imagen esté cargada en la caché para mostrarla con efecto y no se note la carga.