Como crear una precarga (no flash)

xArchangellx · #1 (**permalink**) 03/11/2008, 15:24

Oigan muchachos e visto varias precargas, al iniciarse en una pagina web, pero no son flash, alguien sabe como hacer una creo q solo es un aimagen y luego desparece cuando la pagina ya se cargo donde pùedo aprender a crearla gracias

Keysher · #2 (**permalink**) 03/11/2008, 15:36

Umm, así a bote pronto....

mandas las cabeceras HTML....
mandas una imagen cargando dentro de un div que ocupe toda la página
liberas los bufferes (por si acaso)
Sigues con las operaciones y la carga de tu web
y cuando se cargue todo, quitas el div....

Pero esto último tendrás que hacerlo con JS, ya que desde PHP no tienes forma de saber cuando se ha terminado de cargar todo.

xArchangellx · #3 (**permalink**) 03/11/2008, 15:55

Cita:

Iniciado por Keysher

Umm, así a bote pronto....

mandas las cabeceras HTML....
mandas una imagen cargando dentro de un div que ocupe toda la página
liberas los bufferes (por si acaso)
Sigues con las operaciones y la carga de tu web
y cuando se cargue todo, quitas el div....

Pero esto último tendrás que hacerlo con JS, ya que desde PHP no tienes forma de saber cuando se ha terminado de cargar todo.

Oie men y no sabes como hacerlo tu explicación esta bien pero el codigo como lo haria

pato12 · #4 (**permalink**) 03/11/2008, 15:56

Hola,
Lo que pudes hacer es poner todo el contenido en un div oculto y otro que diga "Cargando.." o algo haci en otro div, fuera del oculto.
En el body pone onload="terminado()" y terminado() oculta el div de espera y aparese el div del contenido.
Es lo que yo hice para una web.
Prueba esto:

Código HTML:

<!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>Precargado</title>
<script type="text/javascript">
function terminado(){
document.getElementById('contenido_web').style.visibility='visible';
document.getElementById('div_espera').style.visibility='hidden';
}
</script>
</head>

<body onload="terminado();">
<div id="div_espera" style="top:0; left:0; position:absolute; background-color:#FF0000; width: 98px; height: 21px;"><strong>Cargando...</strong></div>
<div id="contenido_web" style="visibility:hidden;">
  <p>Contenido de mi web</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp; </p>
</div>
</body>
</html>

Suerte
Salu2

GatorV · #5 (**permalink**) 03/11/2008, 16:41

Tema trasladado a Javascript.

ghidalgoram · #6 (**permalink**) 03/11/2008, 16:54

Con gusto amigo.
Eso me tocó hacerlo para uno de mis proyectos en mi trabajo

Como dice nuestro amigo anterior, pones dos DIVS (Uno para la imagen que deseas mostrar y el otro para la imagen LOADING)

Código:

<div id="preloading_img" style="display:none" align="center">
<img name="img_preload_circle" id="img_preload_circle" src="preload.gif"  /></div>


<div id="img_parts_house" align="center" style="display:block">
<img src="imagen_a_mostrar.jpg" id="img_parts_house" name="img_parts_house" />
</div>

Quiero aclararte que en el caso mío, yo utilicé un List Box y cada ves que se cambia una opción, el evento onChange="" llama a la función change_photo_flash(1)
Todo es un javascript con algunas partes que utilice con PHP.

La función change_photo_flash(1) debe estar ubicada entre el <HEAD></HEAD>

Este es el código:

Código PHP:

  function change_photo_flash(option_foto, preload) 
{  
 
 
    //+-IMAGE+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+ 
    imagen2=new Image; 
    img_pre=new Image; 
 
    //CHANGE PHOTO. 
    ruta = "foto_"+option_foto+".jpg"; 
 
    imagen2.src=ruta; 
    verify_preload(); 
 
    } 
}//change_photo_flash() 
 
 
 
//+-+-+-+-+-+-+-+-+-+-+-+-+-+-++-+-+- 
function verify_preload() 
{  
    if(imagen2.complete)//Imagen cargada 
    {  
        document.getElementById('preloading_img').style.display="none"; 
        document.forms['frm_info'].img_parts_house.src=imagen2.src;//change photo. 
        document.forms['frm_info'].img_parts_house.style.display="block"; 
    } 
    else 
    if(!imagen2.complete)//Imagen cargándose. 
    {     
        document.forms['frm_info'].img_parts_house.style.display="none"; 
        document.getElementById('preloading_img').style.display="block"; 
        setTimeout('verify_preload()', 100); // Si la imagen no ha sido cargada,... se vuelve a llamar a la misma función. 
    } 
     
}//End verify_preload() 
 
Espero que te funcione.

Nota: Para la el GIF Preload puedes crear tu favorito en http://www.ajaxload.info/

Es bastante sencillo

Saludos

xArchangellx · #7 (**permalink**) 05/11/2008, 10:40

Muchisimas gracias a todos por la respuesta ahora si lo pondre a prueba, bendiciones a todos xD!!

jorcore · #8 (**permalink**) 01/03/2011, 19:17

Me salvaste!!! pato12