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

freesoftwarrior · #1 (**permalink**) 07/05/2012, 14:10

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ú

IsaBelM · #2 (**permalink**) 07/05/2012, 14:51

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

rossijona · #3 (**permalink**) 07/05/2012, 15:01

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!

Dafonz · #4 (**permalink**) 07/05/2012, 15:07

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

freesoftwarrior · #5 (**permalink**) 08/05/2012, 17:04

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ú

danielkvaldez · #6 (**permalink**) 08/05/2012, 18:42

a mi tambien me fue útil su ayuda, gracias