Cargar una pagina

mdk · #1 (**permalink**) 10/12/2008, 06:50

Hola, tengo una capa en el documento (La cual llamaremos 'BackGround'), en la cual creo varias capas dentro con sus fondos (Todo esto con javascript). El problema esta en que cuando cargo la pagina en el servidor, como unas imagenes pesan mas que otras, se me cargan mal o tardan en cargar. Como podria hacer para que me saliera un mensaje de cargando la pagina mientras se carga la capa BackGround, mientras se cargan las capas que he creado en ella con sus respectivas imagenes?

Un saludo.

P.D. Si no me he explicado bien, volvere a intentar explicarlo :-p

Panino5001 · #2 (**permalink**) 10/12/2008, 07:05

Podrías usar algo como esto:

Código PHP:

  <!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=iso-8859-1" /> 
<title>Documento sin t&iacute;tulo</title> 
</head> 
 
<body> 
<div id="canvas" style="position:absolute; left:-1500px; top:-1500px;"> 
<img src="img2/1.jpg" /> 
<img src="img2/2.jpg" /> 
<img src="img2/3.jpg" /> 
<img src="img2/4.jpg" /> 
</div> 
<!-- crossbrowser images_loading_bar - Gerard Ferrandez - www.dhteumeuleu.com - Feb 2005 --> 
<span id="LB0" style="position:absolute;left:50%;top:50%;"><span style="position:absolute;font-family:arial;font-size:10px;color:#ccc;background:#000;left:-50px;top:-18px">Loading...</span><span style="position:absolute;left:-50px;top:-5px;font-size:1px;width:100px;height:10px;background:#333"><span id="LB1" style="position:absolute;font-size:1px;width:0px;height:10px;background:#ccc"></span></span></span> 
<script type="text/javascript">m00=document.getElementById("canvas").getElementsByTagName("img");m01=m00.length;function images_loading_bar(){m02=0;for(i=0;i<m01;i++)m02+=(m00[i].complete)?1:0;document.getElementById("LB1").style.width=Math.round(m02/m01*100)+'px';if(m02==m01)setTimeout("document.getElementById('LB0').style.display='none'",128); else setTimeout("images_loading_bar()", 64);};images_loading_bar();</script> 
<!-- end of images_loading_bar code --> 
 
</body> 
</html>

mdk · #3 (**permalink**) 10/12/2008, 14:00

Hola, lo siento, pero eso no me sirve, veras.. todo el codigo de la pagina lo estoy haciendo en javascript. Y esto es lo unico que tengo en el Html:

Código PHP:

  <script language="JavaScript" src="script.js"></script> 
<link rel="stylesheet" type="text/css" href="style.css"> 
<body scroll="no" onload="LanzEvent()" style="margin: 0;"> 
<div id="BackGround" class="CBackground"></div>

Como es logico, en el archivo script.js creo todas las capas dentro de la capa BackGround con sus respectivas imagenes y demas. Pero esto, no se crea hasta que no lanzo la funcion LanzEvent desde el body. El problema, es que si es la primera vez que se visita la pagina, no "carga todo" si no le das a actualizar varias veces. Asi que supongo que deberia de poner el script para la precarga dentro del archivo script.js ya que fuera lo he probado y no hace nada.

Panino5001 · #4 (**permalink**) 10/12/2008, 14:38

Bueno, imagino que si tenés la habilidad para crear todo desde cero casi sin html, no te costará nada adaptar eso, ya que ni siquiera es necesario incluir las imágenes en html para verificar si la propiedad complete es true: Sólo tenés que instanciar el objeto Image, establecer el src y verificar vía setInterval cuando complete==true para toda tu secuencia de imágenes.