3 replies to this topic

[Juan Luis]

Hola que tal.
Tengo hechas varias galerias de imágenes que con dos botones va cambiando la imagen.
Lo que los botones hacen es cambiar el atibuto "src" de la imagen y un contador que aumenta o disminuye según sea el caso todo esto con Javascript.
El problema es que para una conexión lenta cuando se le da al botón puede tardar 2 segundos en cargar la siguiente imagen y parece que el clic no ha funciona. Para solucionar esto necesito que mientras se carga la siguiente imagen se muestre un preloader.
¿Alguien sabe como hacer un preloader es este caso, para que en este lapsus de cambio de imagen se vea que está cargando la siguiente imagen?.
Gracias de antemano.

[enecumene]

Hola Juan Luis, lo ideal sería mostrar el código en que realizas dicha acción, para ver si se le puede anexar esa opción que deseas.

Saludos.

[squall2501]

Estimado

No se como estaras llamando a tus imagenes ,pero si lo estas haciendo con ajax es facil de hacer mientras el readystate este en 1 entonces carga en un span con id loading  tu imagen puedes bajar un gif animado en google y cuando llegue a state 4 pues que este vacio

Al menos asi lo hago yo cuando hago galerias o cosas asi  mientras espero respuesta del servidor

Saludos

[java]

// Desarrollado por www.guinet.cl-ricardo@guinet.cl
function getXMLHTTPRequest()
{
var req = false;
try
  {
    req = new XMLHttpRequest(); /* p.e. Firefox */
  }
catch(err1)
  {
  try
    {
    req = new ActiveXObject("Msxml2.XMLHTTP");
  /* algunas versiones IE */
    }
  catch(err2)
    {
    try
      {
      req = new ActiveXObject("Microsoft.XMLHTTP");
  /* algunas versiones IE */
      }
      catch(err3)
        {
        req = false;
        }
    }
  }
return req;
}
var miPeticion = getXMLHTTPRequest();
//***************************************************************************************
function from(id){
        var mi_aleatorio=parseInt(Math.random()*99999999);
        var vinculo="ajax.php?pos="+id+"&rand="+mi_aleatorio;
 
        miPeticion.open("GET",vinculo,true);
     
        miPeticion.onreadystatechange=miPeticion.onreadystatechange=function(){
       
                //En una variable cargo el id del span que me mostrara el gif loading
                var B=document.getElementById("loading");
              if(miPeticion.readyState==1){
                     
                        //si el  ready state esta en 1 entonces muestro la imagen
                        B.innerHTML = "<img src='images/preloader.gif' alg='Loading...'>";
                    }
             
              if (miPeticion.readyState==4)
              {
             
                 

                      if (miPeticion.status==200)
                      {
                             
                              var http=miPeticion.responseText;
                             
                              document.getElementById("foto_b_2").innerHTML= http;
                              // si el state esta en 4 y el documento esta listo limpio el span
                                B.innerHTML="";
                      }
                      else{
                     
                          alert("Ha ocurrido un error desde el servidor"+miPeticion.statusText);
                       
                        }
              }



      }
     
      miPeticion.send(null);

}

[/java]

[Juan Luis]

Este es el codigo que empleo usando la libreria JQuery.

<script type="text/javascript">

$(document).ready(function(){ 
//variable que marca la primera imagen  
$adriano=1;
//variable que indica el total de imaganes
$adrianototalfotos=15;
//funcion para ir pasando imagenes aumentando
$("#adrianoflechader").click(function(){
$adriano  ;
if($adriano>$adrianototalfotos){
$adriano=1;
}
$(".adrianolaimagen img").attr ({
src:"portadrianomain/final/img"  $adriano  ".jpg"});
$("#adrianoquefoto p").text("Imagen "  $adriano  " de "  $adrianototalfotos);
});
//fucnion para ir pasando imagenes disminuyendo
$("#adrianoflechaiz").click(function(){  
$adriano--;
if($adriano==0){
$adriano=$adrianototalfotos;
}
$(".adrianolaimagen img").attr ({
src:"portadrianomain/final/img"  $adriano  ".jpg"});
$("#adrianoquefoto p").text("Imagen "  $adriano  " de "  $adrianototalfotos);
//alert(n);
});
  })
</script>

<div class="flotaadriano">
<div class="adrianolaimagen">
<img src="portadrianomain/final/img1.jpg" alt="Port Adriano" title="Port Adriano">
</div>
<div>
<div class="pegueraflechaiz" id="adrianoflechaiz">
<img src="/imagenes/arrowsmall.png" height="20px" width="20px" alt="">
</div>
<div class="pegueraflechader" id="adrianoflechader">
<img src="/imagenes/arrowsmall2.png" height="20px" width="20px" alt="">
</div>
<div class="quefoto" id="adrianoquefoto"><p>imagen 1 de 15</p></div>
</div>
</div>

Gracias squall2501 por tu respuesta, el problema es que las funciones que yo empleo no lo hacen con ajax, pero lo voy a probar con ajax.