[SOLUCIONADO] Consulta

[dimas18]

Buen dia amigos.
Actualmente estoy armando un sitio de imagenes, que mas que todo es para conocer como anda, mi consulta es sobre si me pueden ayudar a solucionar un codigo JS.

El js trabaja de esta forma, el servidor por medio de php me envia la primera imagen de una imagen gif, me la envia en jpg, al dar clic sobre la imagen jpg el js me cambia el atributo src por el de la imagen gif, en lo que me gustaria que me ayudasen es sobre como podria añadirle un gif como de carga por mientras se carga el gif de la imagen que quiere reproducir el visitante.

espero que me haya explicado bien :)

este es el codigo que uso

Código PHP:

 <div class="featured-thumbnail">
<img  class="" id="DIV1" src="CAPTURA IMAGEN GIF EN JPG" width="ANCHO" height="ALTO" alt=""
onclick="document.getElementById('DIV1').src='IMAGEN GIF ORIGINAL'; 

<!-- eSTA ULTIMA LINEA SOLO QUITA UN ATRIBUTO PARA QUE SE MUESTRE UN CONEDOR SOBRE
 LA IMAGEN PERO TENDRIA QUE CARGAR DESPUES DEL LOADER O NO IMPORTA -->
$('#<?php echo 'span'.$i ?>').removeAttr('style')"<?php } ?>></div>  

Muchas gracias

por si desean verlo en funcionamiento pueden ingresar en www.openzona.com en la categoria de GIF van a ver de lo que hablo

[Alexis88]

Retrasa la aparición de la segunda imagen y mientras tanto, muestra el Gif de carga.

Código Javascript:

var img = document.getElementById("id del elemento <img> al que cambiarás de imagen"),
    carga = document.getElementById("id del elemento <img> con el gif de carga");
 
function ejemplo(){
    img.style.display = "none";
    carga.style.display = "block";    
 
    setTimeout(function(){
        img.src = "nueva_imagen.gif";
        img.style.display = "block";
        carga.style.display = "none";
    }, 2000);
}
 

La función ejemplo() es la encargada de realizar el cambio de imagen como la aparición del Gif de carga. Adáptalo a tus necesidades y dinos cómo te fue.

Saludos

[dimas18]

Muchas Gracias.

Voy a implementarlo a ver como va.

Gracias por tu respuesta.

[dimas18]

Amigo use tu code pero le agregue otras funciones pero tu code me sirvio, muchas gracias

ya al final lo deje asi

Código PHP:

          <script>
        $('img.gifpost').on('click', function(){
var id = $(this).attr("id");
    img = document.getElementById(id),
    carga = document.getElementById('cargar' + id);
    carga.style.display = "block";
    img.src = img.getAttribute("data-url");
        $('img.gifpost').bind('load', function() {
        carga.style.display = "none";
             setTimeout(function(){
             $('#span' + id).removeAttr('style');
             }, 3000);
        })
});
        </script>