mostrar div antes de inicializar la página

sebacomas · #1 (**permalink**) 21/01/2012, 17:33

Hola, tengo el siguiente problema, he hecho una página toda en php, nada de ajax, que tiene una galéría de imagenes que se cargan de una base de datos, el cliente quiere que se muestre un cargador, ya esta todo muy avanzado para usar ajax, entonces tengo que lograr de alguna forma mostrar un cargador cuando esta cargando las imágenes, se me ocurrió hacer un div arriba de toda la página que muestre un cargador, hasta que la página termine de cargar. Alguien me puede dar una mano de cómo encarar esta alternativa que me sacará un poco del paso.

Saludos y gracias!

madhatterdef · #2 (**permalink**) 21/01/2012, 18:18

prueba esto

html

Código:

<body onload="ocultarcargador();"> <div id="cargador">      Cargando... </div> <!--Aquí empieza el resto de tu contenido... --> </body>

css

Código:

#cargador {    position:absolute;    top:0px;    left:0px;    width:100%;    height:100%;    background-color:white; } .esconder {display:none;}

js

Código:

<script type="text/javascript">function ocultarcargador() {      c = document.getElementById('cargador');      c.className="esconder"; }</script>

o mejor aún con jquery

html

Código:

<body> <div id="cargador">Cargando...</div><!--Aquí empieza el resto de tu  contenido... --></body>

css

Código:

#cargador {    position:absolute;    top:0px;    left:0px;    width:100%;    height:100%;    background-color:white; }

js

Código:

<script type="text/javascript">
$(document).ready(function()    {
       $('#cargador').fadeOut(1000);
        });
</script>

sebacomas · #3 (**permalink**) 21/01/2012, 19:42

Te agradezco pila por tu respuesta, pero no logré que me funcionara, ya lo probaste tú.
Saludos!

madhatterdef · #4 (**permalink**) 21/01/2012, 19:50

si a ambos a cuál te refieres y que pusiste específicamente (código completo)

sebacomas · #5 (**permalink**) 21/01/2012, 20:00

Perdón ahora si me funciona le puse un zindex al div.

sebacomas · #6 (**permalink**) 21/01/2012, 20:04

Sos un genio! El de ajax se ve realmente bien! me sacaste del paso!
Saludos!

madhatterdef · #7 (**permalink**) 21/01/2012, 20:46

de nada

sebacomas · #8 (**permalink**) 22/01/2012, 12:41

Ahora me surgio un problemita más, cuando lo pruebo en IE queda barbaro, pero en chrome las imagenes se cargan por franjas y lo que quiero es que aparezcan de una, no se si es posible esto.
Saludos!

madhatterdef · #9 (**permalink**) 22/01/2012, 13:14

no entiendo te podrias explicar mejor???

sebacomas · #10 (**permalink**) 22/01/2012, 13:40

Me explico mejor, tu código funciona bien en los dos exploradores. Ahora, al desaparecer el div con el cargador, no se terminaron de cargar las imágenes, ya que se siguen cargando, no se si se puede hacer que el div desaparezca una vez cargadas las imágenes.
Saludos!

madhatterdef · #11 (**permalink**) 22/01/2012, 14:01

ahora entiendo.

no sé cuál podría ser el problema esa función dice que se ejecute al terminar de cargar la página.

sebacomas · #12 (**permalink**) 22/01/2012, 14:09

Cómo puedo pasarte la web sin que lo registre el buscador?

madhatterdef · #13 (**permalink**) 22/01/2012, 15:08

no entiendo???

vaya un dejavu

sebacomas · #14 (**permalink**) 22/01/2012, 15:49

Si te paso la web donde tengo el problema, tal vez lo registre el buscador y no quiero, ya que alguien puede buscar por el nombre de la web y vea este post.
Entonces como te comentaba en chrome cuando el div desaparece sigue cargando la imágen, entonces mi pregunta es si hay alguna forma de que el div demore un poco más en desaparecer.
Saludos!

madhatterdef · #15 (**permalink**) 22/01/2012, 16:06

ya esta

<script type="text/javascript">
$(document).ready(function() {
$('#cargador').fadeOut(1000);
});
</script>

Ese número es el que define que tan lento/rápido vaya la animación puede que te sirva

sebacomas · #16 (**permalink**) 22/01/2012, 16:21

Ok, pero en vez de que vaya de 100% de opacidad a 0% se puede hacer que de 100% a 50% por ejemplo!

madhatterdef · #17 (**permalink**) 22/01/2012, 16:33

creo que no.

cual seria el objetivo la capa quedaria arriba del texto y no se podria tocar nada abajo.

PD puedes poner otra capa entemedio con opacidad al 50%

madhatterdef · #18 (**permalink**) 22/01/2012, 18:49

Cita:

Iniciado por madhatterdef

ya esta

<script type="text/javascript">
$(document).ready(function() {
$('#cargador').fadeOut(1000);
});
</script>

Ese número es el que define que tan lento/rápido vaya la animación puede que te sirva

Se me ocurrió una respuesta mejor

en tu js pone

Código:

$(document).ready(function ()    {
funcioncargador();
        });
         function funcioncargador(){
cargador = $('#cargador');
cargador.delay(2000)
cargador.fadeOut(1000);}

lo rojo es el tiempo

sebacomas · #19 (**permalink**) 23/01/2012, 06:31

Saludos!

madhatterdef · #20 (**permalink**) 23/01/2012, 09:34

saludos