Hacer Cargando Pagina ...

aldo1982 · #1 (**permalink**) 21/06/2007, 00:30

Hola gente resulta que tengo un sitio donde a cada enlace le puse el siguiente codigo

Código:

onClick="new Ajax.Updater( 'contenido_ajax', 'ajax_home.php' );return false;"

esto lo hice debido a que la pagina tiene musica y apra no usar iframes use este metodo que nos da AJAX para que no recargue la pagina y la música no se corte ( quiza les sirvba la idea :) je ) bue el tema es el siguiente , necesitaria hacer ( porque demora al cargar la musica) algun cargador de pagina cuando el usuario va navegando el sitio. Me podrian dar alguna ayuda si no es mucho pedir, por favbor ?
antes que nada muchas gracias. salu2

caricatos · #2 (**permalink**) 21/06/2007, 02:32

Hola:

En esta página: Música en la web, cargo música en un iframe haciendo la llamada ajax hacia el propio fichero mp3... tal vez te sirva hacer lo mismo y poner encima del tu página una capa con un gif animado que no permita usar los controles que tengas en ell (en la página citada, los altavoces están en sendos iframes, y por delante hay una capa que se muestra cuando se cargan los ficheros con un gif)

No sé si te servirá la idea.

Saludos

aldo1982 · #3 (**permalink**) 21/06/2007, 02:51

OK caricatos muchas gracias por responderme. oye he leido por ahi que te interesaria subir archivos con AJAX en un nuevo post te pondre la descarga de un script que baje que está muy bueno.
salu2 y muchisimas gracias nuevamente.

aldo1982 · #4 (**permalink**) 21/06/2007, 02:55

oye perdon mi nuevo post. aqui mi duda. soy nuevo en ajax jeje. bue lo que querria ahcer es lo siguiente:
una vez que el usuario ingresa a mi web que aparezca un gif "Cargando" y cuadno se termine de cargar toda la página ( el index me alcanza) ahi recien que muestre lo que hay en el index ( me explico ? )
salu2 y gracias :)

caricatos · #5 (**permalink**) 21/06/2007, 03:16

Cita:

Iniciado por aldo1982

OK caricatos muchas gracias por responderme. oye he leido por ahi que te interesaria subir archivos con AJAX en un nuevo post te pondre la descarga de un script que baje que está muy bueno.
salu2 y muchisimas gracias nuevamente.

No pierdas el tiempo con ese mensaje que seguro que no usa ajax sino un iframe oculto... de ello hemos hablado mucho y sin duda no es posible. De todos modos, puedes indicarlo para chequearlo.

Cita:

Iniciado por aldo1982

oye perdon mi nuevo post. aqui mi duda. soy nuevo en ajax jeje. bue lo que querria ahcer es lo siguiente:
una vez que el usuario ingresa a mi web que aparezca un gif "Cargando" y cuadno se termine de cargar toda la página ( el index me alcanza) ahi recien que muestre lo que hay en el index ( me explico ? )
salu2 y gracias :)

Eso es algo un poco complejo, ya que si el visitante tiene javascript desactivado jamás verá la página... o tener que variar 2 veces la visibilidad de esa capa de carga... La idea es una capa con posición absoluta que abarque toda la página, que en principio esté oculta, y al cargar la página se muestre, y arranque un script del tipo de precarga (consultar los atributos complete de las imágenes... y si se trata de música tal vez te sirva el enlace que puse antes)... y al cargarse todos esos elementos, volver a ocultar esa capa...

Me parece mejor poner las dimensiones a las imágenes para evitar el efecto "acomodarse" y que se carguen normalmente.

Saludos

aldo1982 · #6 (**permalink**) 21/06/2007, 17:31

seria mucha molestia pedir un ejemplo para comprender mejor? ya que soy muy New en esto de Ajax :S

salu2 y gracais. y perdon la molestia

caricatos · #7 (**permalink**) 22/06/2007, 00:36

Hola:

Te explico como haría yo una especie de precarga de un fichero mp3...

Código:

function tag(id) {
	return document.getElementById(id);
}

function listo() {
	if ((ajax.readyState == 4) && (ajax.status == 200))
		tag("precarga").style.display = "none";
}

function ini() {
	tag("precarga").style.display = "block";
	ajax = new XMLHttpRequest();
	ajax.onreadystatechange = listo;
	ajax.open("GET", "fichero.mp3", true);
	ajax.send(null);
}
window.onload = ini;

y antes del cierre del body:

Código:

<div id="precarga" style="display: none; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: white url(esperando.gif) no-repeat center center">
</div>
</body>

Luego tendrías que probarlo y depurarlo.

Saludos

aldo1982 · #8 (**permalink**) 22/06/2007, 18:22

hola, muchisimas gracias, está muy claro ahora lo probaré y leugo te comento que tal me ha ido :)
salu2

aldo1982 · #9 (**permalink**) 22/06/2007, 21:49

Bien ahi lo probé ta muy bueno :) la cosa seria o sea viste por ejemplo en int explorer, opera o el explorador que sea...abajo esta la barra de progreso de carga de la página..y a la izquierda dice "cargando 8 de x ..." bue lo ke se me ocurria a mi es como poder manejar lso datos de esa barra de progreso, para que uan vez que esa barra sea haya cargado al 100% ahi cargue la pagina y saque el tipico gifLoad.gif

me explico ?...o sea se puede hacer esto ?

salu2 y más gracias que antes :) jeje

caricatos · #10 (**permalink**) 23/06/2007, 00:09

Hola:

La barra de estado se controla con window.status...

ajax = new XMLHttpRequest();
window.status = "cargando...";

Pero supongo que mantener la info es algo más complicado... tal vez con setInterval y pocos milisegundos sería apropiado...

Saludos

aldo1982 · #11 (**permalink**) 24/06/2007, 23:06

muchas gracias nuevamente caricatos :)
eso lo pondria entre las etiquetas <head></head> ?

caricatos · #12 (**permalink**) 25/06/2007, 02:02

Hola:

La idea es que el control de la barra la tengas cuando crees el objeto ajax, y dejes de tener ese control cuando se cargue del todo.

<head>
<script>
var espera = false;
var ajax;
function finAjax() {
if (espera) {clearInterval(espera); espera = false;}
// resto de acciones...
}

ajax = new objetoAjax();
ajax.onreadystatechange = finAjax;
espera = setInterval("window.status = 'cargando...'", 100);
...

Saludos

aldo1982 · #13 (**permalink**) 28/06/2007, 10:50

ok muchas gracias.
ahi comprendi jeej
salu2

quiquebg · #14 (**permalink**) 17/07/2009, 07:38

------------------------------->
mensaje de abajo

quiquebg · #15 (**permalink**) 17/07/2009, 07:41

este funciona y muy bien
espero k le sea de ayuda
el unico inconveniente es: para k se vea cargando debe ser con el explorador IE

__________________________
Al principio de la pagina < head >, debes de poner el codigo:

Código PHP:

  <!-- THE WAIT SCREEEN!!! -->

<div ID="waitDiv" style="position:absolute;left:380;top:280;visibility:hidden">

<center>

<table border=0 cellpadding=0 cellspacing=0 width="250"><tr><td bgcolor="#000000">

<table cellpadding=2 cellspacing=1 border=0 width="100%"><tr><td bgcolor="#48409A">

<center><font color="#F9E78C" face="Verdana, Arial, Helvetica, sans-serif" size="3"><b>Cargando la página...</b></font><br> <img src="await.gif" border="0" width="200" height="20"><br>

<font size="2" color="#F9E78C" face="Verdana, Arial, Helvetica, sans-serif">Espere por favor...</font></center>

</td>

</tr>

</table>

</td></tr>

</table>

</center>

</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', 1);

 
  //-->

</SCRIPT>

<!-- END -->

y Al final de la pagina < body > ponemos:

Código PHP:

  <!-- SCRIPT DE ESPERA -->

<script language="javascript" type="text/javascript">

<!--

ap_showWaitMessage('waitDiv', 0);

//-->

</SCRIPT>

______________________________

Guarda esta imagen donde pongas el script
( guardala como await . gif , si te atreves puedes emplear otra imagen , modificando el script . )
imagen aqui--> creatupropiaweb.com/javascript/await.gif

_______________________________
un ejemplo entren aqui---> sonisya.webcindario.com/sonisya1.0/prina.htm
para k se vea cargando debe ser con el explorador IE

salu2