Foros del Web » Programando para Internet » Javascript »

Poner "animación" mientras se carga una página

Estas en el tema de Poner "animación" mientras se carga una página en el foro de Javascript en Foros del Web. Buenas tardes: Espero que este sea el foro apropiado. Verán, me han solicitado algo nuevo, para mi es nuevo, aunque por ahí creo haberlo visto ...
  #1 (permalink)  
Antiguo 07/05/2012, 14:10
Avatar de freesoftwarrior  
Fecha de Ingreso: marzo-2006
Mensajes: 362
Antigüedad: 18 años, 7 meses
Puntos: 10
Poner "animación" mientras se carga una página

Buenas tardes:
Espero que este sea el foro apropiado. Verán, me han solicitado algo nuevo, para mi es nuevo, aunque por ahí creo haberlo visto en algún momento.

Quieren que una página de un iframe NO se muestre hasta que este totalmente cargada, y que mientras tanto, aparezca una animación, del tipo "cargando", "configurando sistema", etc. La animación no es problema, un simple GIF y listo, pero lo demás si que me tiene confundido pues, reitero, jamás me habían pedido eso.

Se que en ASP existe el método flush() pero la página que debo de cargar es un ASP que, entre otras cosas, se conecta con 2 base de datos, crea varios arrays mediante GetRows() (aunque luego los destruyo con un Erase para liberar memoria) y además crea una no pequeña lista de variables session (unas 30 más o menos) y como a veces, según la conexión del usuario, demora en cargar, el iframe suele mostrarse en blanco (obvio), detalle que he podido solucionar colocándole el atributo AllowTransparency y definiendo un color en la página principal en la cual esta el llamado al iframe.

¿Cómo podría hacer eso, de que no se muestre nada hasta que este totalmente cargado?

Muchas gracias por el apoyo

Un saludo desde Lima, Perú
  #2 (permalink)  
Antiguo 07/05/2012, 14:51
Avatar de IsaBelM
Colaborador
 
Fecha de Ingreso: junio-2008
Mensajes: 5.032
Antigüedad: 16 años, 4 meses
Puntos: 1012
Respuesta: Poner "animación" mientras se carga una página

prueba con esto
Cita:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento sin título</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
border: none;
position: relative;
}

html, body {
width: 100%;
height: 100%;
}

#fondo {
display: block;
background-color: #111;
width: 100%;
min-height: 100%;
height: auto !important;
z-index: 99;
position: fixed;
}

#imagen {
font: bold 13px Helvetica, Arial, sans-serif;
color: #fff;
text-align: center;
width: 300px;
height: 20px;
position: absolute;
top: 52%;
left: 40%;
}
</style>
<script type="text/javascript">
function fnc() {
document.getElementById('fondo').style.display = 'none';
}

window.onload = function() {fnc();};
</script>
</head>
<body>
<div id="fondo"><div id="imagen">CARGANDO ....</div></div>


<?php
$cin = array(1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18 ,19,20,21,22,23,24,25,26,27,28,29,30,31,32,33,34,3 5,36,37,38,39,40,41,42,43,44,45,46,47,48,49,50);

for($x=0; $x<46; $x++){
for($a=1; $a<47; $a++){
if($x<$a) {
for($b=2; $b<48; $b++){
if($a<$b){
for($c=3; $c<49; $c++){
if($b<$c){
for($d=4; $d<50; $d++){
if($c<$d){
echo $cin[$x]."-".$cin[$a]."-".$cin[$b]."-".$cin[$c]."-".$cin[$d]."+++";
}}}}}}}}}
?>

</body>
</html>
te lo dejo en php porque la conversión es sencilla. como es un proceso largo, pruebalo en chrome.

la idea es usar una capa (100% x 100%) y cuando la página esté cargada, ocultarla
__________________
if(ViolenciaDeGénero) {alert('MUJER ASESINADA');}
  #3 (permalink)  
Antiguo 07/05/2012, 15:01
 
Fecha de Ingreso: junio-2010
Mensajes: 142
Antigüedad: 14 años, 4 meses
Puntos: 5
Respuesta: Poner "animación" mientras se carga una página

Hay varias formas.

Mira esto, puedes simular facilmente con

setTimeout() de jquery (eso es lo más sencillo ).

Luego hay opciones como ajax o ver si load(), funciona.

Suerte!
  #4 (permalink)  
Antiguo 07/05/2012, 15:07
Avatar de Dafonz  
Fecha de Ingreso: octubre-2009
Mensajes: 127
Antigüedad: 15 años
Puntos: 36
Respuesta: Poner "animación" mientras se carga una página

setTimeout no sirve para eso.. seria condicionar al cliente independientemente de lo que tarde cargando a esperar el tiempo.. ajax y load podrían servir si esta cargando las cosas desde antes con estos recursos si no no tiene caso implementarlas.. con el simple window.onload es posible hasta cierto punto
  #5 (permalink)  
Antiguo 08/05/2012, 17:04
Avatar de freesoftwarrior  
Fecha de Ingreso: marzo-2006
Mensajes: 362
Antigüedad: 18 años, 7 meses
Puntos: 10
Respuesta: Poner "animación" mientras se carga una página

Muchas gracias a todos por sus respuestas. No se por que no me llegó la notificación a mi correo. Revisaré sus sugerencias y les comento como me resultó. Este cliente me esta sacando canas verdes y eso que ya casi no me queda pelo para regalar jejeje.

Un saludo desde el Perú
  #6 (permalink)  
Antiguo 08/05/2012, 18:42
 
Fecha de Ingreso: abril-2012
Ubicación: necochea buenos aires argentina
Mensajes: 16
Antigüedad: 12 años, 6 meses
Puntos: 1
Respuesta: Poner "animación" mientras se carga una página

a mi tambien me fue útil su ayuda, gracias

Etiquetas: mientras, página
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 16:57.