Imagen de Carga al entrar en web

PomyLocuras · #1 (**permalink**) 06/11/2012, 13:10

Saludos,

Quisiera incorporar en mi web una imagen al entrar de bienvenida que desaparezca a los 2s de entrar en la web y aparezca después los contenidos del index.
¿Como lo puedo implementar?
Gracias.

tutorias · #2 (**permalink**) 07/11/2012, 13:39

Un saludo.

Podrias implementar ajax para despues invocar la carga de la web, pero también puedes simplemente ocultar un <div> al cabo de los dos segundos.

Ejemplo:

Código HTML:

<!DOCTYPE html>
<html lang="es-CO">
<head>
	<meta charset="UTF-8">
	<title>@tutorias</title>
	<style type="text/css">
	#saludo{
		background-color:hsla(0,0%,40%,.4);
		min-width:99%;
		min-height:99%;
		position:absolute;
		top:0;
		color:#900;
		font-size: 4em;
		text-align: center;
		line-height: 10em;
	}
	</style>
	<script language="javascript">
		v=new Date();
		function getTime() {
			n = new Date();
			s = 1 - Math.round((n.getTime() - v.getTime())/2000);
			if(s==0)
				document.getElementById("saludo").setAttribute("style","display:none");

			window.setTimeout("getTime();", 2000);
		}
		window.onload = getTime(Math.random(1,2000));
    </script>
</head>
<body>
<div id="saludo">Bienvenid@s a mi web!!</div>

	<h1>titulo de la web</h1>
	<h2>subtitulo de la web</h2>
	contenido de  la web...
</body>
</html>

memoadian · #3 (**permalink**) 07/11/2012, 14:41

Tambien existen plugins Jquery, buscalos como preloads Jquery si te interesa.

emprear · #4 (**permalink**) 09/11/2012, 04:55

Cita:

Iniciado por PomyLocuras

Saludos,

Quisiera incorporar en mi web una imagen al entrar de bienvenida que desaparezca a los 2s de entrar en la web y aparezca después los contenidos del index.
¿Como lo puedo implementar?
Gracias.

No es lo mismo precargar contenidos antes de mostrar la página que mostrar una capa / imagen durante un determinado tiempo y ocultarla. Es posible que la precarga dure más de 2 segundos, ¿cual de las dos cosas exactamente querés hacer?

Saludos

furoya · #5 (**permalink**) 11/11/2012, 06:53

No es la mejor redacción, pero lo que se entiende es que solamente quiere una "pantalla de bienvenida" por 2 segundos y que después aparezca la página ... cargada o cargando. Lo que puede confundir es el título.

Y ni hablar del escript que está debajo. No comprendo lo de meter valores dentro de Math.random() (se puede?, para qué sirve?), ni lo del loop infinito de la función.

Dependiendo de la aclaración de la pregunta, creo que hay varios ejemplos en este sitio para cada una.

IsaBelM · #6 (**permalink**) 11/11/2012, 07:15

la respuesta es no
si a los 2 segundo quiere ocultar la capa

Cita:

setTimeout(fnc, 2000)

donde fnc es la función encargada de ocultar la capa

furoya · #7 (**permalink**) 11/11/2012, 07:53

Cita:

Iniciado por IsaBelM

la respuesta es no

Para hacer citas sí podés usar la etiqueta [quote].
Porque supongo que estarás respondiéndo a mi consulta

Cita:

Iniciado por furoya

No comprendo lo de meter valores dentro de Math.random() (se puede?, para qué sirve?), ni lo del loop infinito de la función.

Un detalle (por lo del loop) es que ese código que pusiste (y lo repito, porque como estaba entre etiquetas de cita a alguno por ahí lo confunde)

Código:

setTimeout(fnc, 2000)

va fuera de la función, preferentemente en el onload.

De cualquier forma, la mía era una pregunta retórica. Pero gracias por el enlace.

(¿Ya te dije que sos mi wikipedia?)

tutorias · #8 (**permalink**) 11/11/2012, 10:37

Como lo indica isaBelM

Código HTML:

<!DOCTYPE html>
<html lang="es-CO">
<head>
  <meta charset="UTF-8">
  <title>@tutorias</title>
  <style type="text/css">
    #saludo{
      background-color:hsla(0,0%,34%,.4);
      color           :#900;
      font-size       : 4em;
      left            :0;
      line-height     : 10em;
      min-height      :100%;
      min-width       :100%;
      position        :absolute;
      text-align      : center;
      top             :0;
    }
  </style>
  <script language="javascript">
    function cerrar() {
        document.getElementById("saludo").setAttribute("style","display:none");
    }
    window.onload = setTimeout(cerrar,2000);
  </script>
</head>
<body>
<div id="saludo">Bienvenid@s a mi web!!</div>

  <h1>titulo de la web</h1>
  <h2>subtitulo de la web</h2>
  contenido de  la web...
</body>
</html>

furoya · #9 (**permalink**) 11/11/2012, 13:36

Cita:

Iniciado por tutorias

Como lo indica isaBelM ...

Y a mí que me pise un tren...

satjaen · #10 (**permalink**) 21/11/2012, 12:56

Tengo este ejemplo y al probarlo sólo me sale en la pantalla Cuerpo del sitio, podeis explicarme un poco?

Código PHP:

  <html> 
<head> 
<title>Título</title> 
<div ID="waitDiv" style="position:absolute;left:300;top:300;visibility:hidden"> 
<table cellpadding="6" cellspacing="0" border="1" bgcolor="#000000" bordercolor="#FFFFFF"> 
<tr><td align=center> 
<font color="#ffffff" face="Verdana" size="4">Cargando página...</font> 
<img src="imagenes_menu/ajax-loader4.gif" border="1"> 
</td> 
</tr></table> 
</div> 
<SCRIPT> 
<!-- 
var DHTML = (document.getElementById || document.all || document.layers); 
function ap_getObj(name) { 
if (document.getElementById) 
{ return document.getElementById(name).style; } 
else if (document.all) 
{ return document.all[name].style; } 
else if (document.layers) 
{ return document.layers[name]; } 
} 
function ap_showWaitMessage(div,flag) { 
if (!DHTML) return; 
var x = ap_getObj(div); x.visibility = (flag) ? 'visible':'hidden' 
if(! document.getElementById) if(document.layers) x.left=280/2; return true; } ap_showWaitMessage('waitDiv', 3); 
//--> 
</SCRIPT> 
</head> 
<body> 
Cuerpo del sitio 
</body> 
<SCRIPT language=javascript> 
<!--  
ap_showWaitMessage('waitDiv', 0);  
//--> 
</SCRIPT> 
</html>

Un saludo

IsaBelM · #11 (**permalink**) 22/11/2012, 07:35

pero de dónde has sacado ese código?? a parte de ser muy antiguo, el bloque no esté incrustado en el body

<recomendación>
no visitas mas esa página
</recomendación>

satjaen · #12 (**permalink**) 22/11/2012, 10:24

Ok, IsaBelM yo no me acuerdo de donde me baje el cod pero si que esta mal estructurado.
A ver que te parece este que te veo muy estresada

Código PHP:

  <html> 
 
 <head> 
 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
 
 <title>Prueba</title> 
 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> 
 
<script type="text/javascript"> 
 
 $(function(){ 
 
 $.ajax({ 
 
 url: 'x.php', 
 
 beforeSend: function(data) { 
 
$('body').html('Cargando...'); 
 
}, 
 
 complete: function(){ 
 
$('body').html(''); 
 
 } 
 
 }); 
 
 }); 
 
</script> 
 
 <style> 
 
 
</style> 
 
</head> 
 <body> 
 
 </body> 
 
</html>

Un saludo

IsaBelM · #13 (**permalink**) 24/11/2012, 15:12

Cita:

Iniciado por satjaen

A ver que te parece este que te veo muy estresada

estresada??

por qué será que me tocan a mi todos estos ******. puffffff!! ya me siento mejor

qué me parece?? que continuas sin enterarte de la misa a la media. a qué viene usar una librería y ajax para hacer tan simple??. claro, esto de simple, es basándome en lo que se presume que quieres hacer acorde a tu primer script

emprear · #14 (**permalink**) 24/11/2012, 16:45

Cita:

Iniciado por IsaBelM

estresada??

por qué será que me tocan a mi todos estos ******. puffffff!! ya me siento mejor

qué me parece?? que continuas sin enterarte de la misa a la media. a qué viene usar una librería y ajax para hacer tan simple??. claro, esto de simple, es basándome en lo que se presume que quieres hacer acorde a tu primer script

<distension>
Más que estresada estás "magnetizada", los atres como moscas a la leche...
@IsabelM, como es el dicho, "misa la media" ó "misa a la nedia", porque eso último me suena más a "Palo y la bolsa".
Y ojo que con el "AsteriskLogger" he podido ver que esconden tus ******, muy atrevido por cierto.
</distension>

Salu2

satjaen · #15 (**permalink**) 24/11/2012, 17:34

Cita:

Iniciado por IsaBelM

estresada??

por qué será que me tocan a mi todos estos ******. puffffff!! ya me siento mejor

qué me parece?? que continuas sin enterarte de la misa a la media. a qué viene usar una librería y ajax para hacer tan simple??. claro, esto de simple, es basándome en lo que se presume que quieres hacer acorde a tu primer script

Hola @IsabelM, sigo notandote bastante estresada, de las dos contestaciones que me has hecho no me has aportado nada. Por lo que veo eres colaboradora y deberías de dar un poco de ejemplo.

Ah!!! y no vuelvas a utilizar conmigo esto: ******. puffffff!!. Las personas "mayores" nos decimos lo que pensamos con palabras claras.
Un saludo

caricatos · #16 (**permalink**) 24/11/2012, 18:40

Hola:

Cita:

Iniciado por satjaen

...de las dos contestaciones que me has hecho no me has aportado nada. Por lo que veo eres colaboradora y deberías de dar un poco de ejemplo.

Con la respuesta:

Cita:

Iniciado por IsaBelM

pero de dónde has sacado ese código?? a parte de ser muy antiguo, el bloque no esté incrustado en el body

<recomendación>
no visitas mas esa página
</recomendación>

... no solo contesta y aporta, te recomienda algo muy importante.
Sobre lo de dar un ejemplo... ¿

?

Cita:

Iniciado por satjaen

...y no vuelvas a utilizar conmigo esto: ******. puffffff!!. Las personas "mayores" nos decimos lo que pensamos con palabras claras.
Un saludo

Lo que no debería utilizar contigo es el botón "responder"

Saludos

satjaen · #17 (**permalink**) 24/11/2012, 19:18

Cita:

Iniciado por caricatos

Hola:

Con la respuesta:

... no solo contesta y aporta, te recomienda algo muy importante.
Sobre lo de dar un ejemplo... ¿

?

Lo que no debería utilizar contigo es el botón "responder"

Saludos

@caricatos, me alegro que alguna vez me conteste, aunque esta vez sea para meter mas leña al fuego.
Yo, lo único que hice es poner un código que si es antiguo o no lo es tampoco no creo que sea para tanto no?
Simplemente, lo puse para ver si podía aportar lo poco se. No entiendo porque se me contesta de esas formas, usted parece una persona seria como moderador que lo es. Y no necesito que se me conteste si la respuesta va ser la de ******. puffffff!!, porque para mi eso es faltarme al respeto.

caricatos · #18 (**permalink**) 25/11/2012, 01:48

Hola:

Sobre esta respuesta:

Cita:

Iniciado por IsaBelM

pero de dónde has sacado ese código?? a parte de ser muy antiguo, el bloque no esté incrustado en el body

<recomendación>
no visitas mas esa página
</recomendación>

El bloque que debería estar en el body, está en el head... lo que se muestra en una página debe incrustarse en el body...

Sigo pensando que es una respuesta correcta... y el añadido de que es antiguo... ¡sin palabras!

document.all y document.layers ha sido una forma de discriminación de navegadores explorer y netscape en sus versiones 4 o inferiores.

... y la "recomendación", sin duda es de agradecer...

Un poco de código javascript:

if (calificativo == "estresada") respuesta = "******. puffffff!!";

Por cierto, contestar o no, es algo voluntario. Tanto los colaboradores como los moderadores participamos voluntariamente... es más, tenemos algunos privilegios debido a que participamos colaborativamente.

Espero que no lo tomes como "meter mas leña al fuego".

Saludos

satjaen · #19 (**permalink**) 25/11/2012, 04:40

Cita:

Iniciado por caricatos

Hola:

Sobre esta respuesta:

El bloque que debería estar en el body, está en el head... lo que se muestra en una página debe incrustarse en el body...

Sigo pensando que es una respuesta correcta... y el añadido de que es antiguo... ¡sin palabras!

document.all y document.layers ha sido una forma de discriminación de navegadores explorer y netscape en sus versiones 4 o inferiores.

... y la "recomendación", sin duda es de agradecer...

Un poco de código javascript:

if (calificativo == "estresada") respuesta = "******. puffffff!!";

Por cierto, contestar o no, es algo voluntario. Tanto los colaboradores como los moderadores participamos voluntariamente... es más, tenemos algunos privilegios debido a que participamos colaborativamente.

Espero que no lo tomes como "meter mas leña al fuego".

Buenos días, no se como puede decir que if (calificativo == "estresada") respuesta = "******. puffffff!!";, sin saber lo que significa ******, no quiero alargar esto mas tiempo porque sino estaríamos escribiendo hasta averiguar el significado de dicho ******. @IsabelM mis disculpas si en algún momento te he ofendido.
Un saludo