Esperar que attr(src,x) termine

oscartt67 · #1 (**permalink**) 22/04/2012, 08:10

Hola a todos.
Tengo el siguiente problema:

el flujo de ejecucion no espera a que attr termine de cargar la imagen: lo hace durante la animacion. Si pongo un alert(1) despues de im.attr, todo va perfectamente.
Se puede usar callback con attr? (lo probé, sin resultados)
Alguna sugerencia?
Gracias de antemano.

Código PHP:

          ...... 
        im.attr("src",$(this).attr("href")); 
        im.css({ 
            position: 'absolute', 
            left: imgxica.offset().left, 
            top: imgxica.offset().top, 
            width: event.target.width, 
            height: event.target.height 
        }); 
        im.animate({left:posfi.left,top:posfi.top,width:700,height:400},400);

caricatos · #2 (**permalink**) 22/04/2012, 10:15

Hola:

Normalmente se precargan las imágenes antes...

Saludos

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.

oscartt67 · #4 (**permalink**) 23/04/2012, 09:51

Gracias por vuestras respuestas.

El código de Naahuel, lo he adaptado así:

Código PHP:

      $('a.setimg').live('click',function(event){
        event.preventDefault();
        imgxica=$(this).children('img');
        im=$('#imgcentral');
        posfi=im.position();
        
        src_imagen = $(this).attr("href");
        imagenPreCargada = new Image(); 
        imagenPreCargada.src = src_imagen;
            
        im = im.hide().attr('src',src_imagen);

        im.css({
            position: 'absolute',
            left: imgxica.offset().left,
            top: imgxica.offset().top,
            width: event.target.width,
            height: event.target.height
        });

        $(imagenPreCargada).load(function(){
            im.animate({left:posfi.left,top:posfi.top,width:700,height:400},400);
        });
    });

El problema es que trabajando en local, como la carga de la src es muy rápida, y siempre me va bien. El miércoles lo subiré al servidor real. Si hay problemas, os dejaré el link de la página y quedará todo mas claro lo que pretendo y lo que ocurre.

Saludos, y gracias de nuevo!

oscartt67 · #5 (**permalink**) 28/04/2012, 05:39

Caricatros, naahuel. Gracias por vuestra ayuda.
Ya subi el código al servidor y funciona de perlas!
Gracias por vuestra ayuda.