Preload en AJAX

Citar

Escrito el 04 Oct 2009 09:32 pm

Hola a todos. Alguien me podria dar una mano con algun tutorial o ejemplo como para crear un preload de la web completa como este: [url=http://sonica.speedy.com.ar/aeropiano][/url]?

Muchas gracias por adelantado. Saludos.
:wink:

Por PabloSC

13 de clabLevel

Envíale un mensaje privado

Citar

Escrito el 09 Nov 2009 03:02 pm

Hola, a mi también me gustaría que me dijeseis alguna forma de conseguirlo. Yo he encontrado esta pagina http://www.ajaxload.info/ donde consigues un montón de prelados en GIF, pero no consigo hacerlo para cuando me cargue la pagina, ya que estoy haciendo una pagina en AJAX y me gustaría tener preloads por si en alguna tardara un poco mas de la cuenta.

Por Cubel

Claber

139 de clabLevel

Genero:Masculino

Envíale un mensaje privado Email

Valencia, España

@pcubel

Citar

Escrito el 11 Nov 2009 05:49 am

un preload un poco mas sencillo que el que tienes en la web puedes hacer esto

Código HTML :

<html>
<head>
<script type="text/javascript">
window.onload=function(){
   document.getElementById('contenido').style.display='';
   document.getElementById('cargador').style.display='none';
}
</script>
</head>
<boby>
<div id="cargador" align="center">Cargando...</div>
<div id="contenido" style="display:none">
Todo el contenido de tu Web Aqui
</div>
<body>
</html>

no cheque el codigo pero la idea es poner el cargador en un Div(en el caso de la pagina este cubre el 100% de la web y es trasparente) pudes cambier el Cargando... por una imagen como las que consigues en http://www.ajaxload.info/ , el contenido lo ponemos en otro div que de entrada tiene su display en none esto hace que no este visible, pero todas sus imagnes y recursos se descargaran aunque no se vean en pantalla, una ves que se descarga todo el contenido de la web se ejecuta el metodo window.onload, en el cual con javascript pongo el style display de cargando a none para esconderlo y a '' el de contenido para mostrarlo.

Por wariodiaz

55 de clabLevel

Envíale un mensaje privado Web

Citar

Escrito el 11 Nov 2009 08:12 am

ok. voy a probar y por lo que dices parece bastante simple!

Pruebo y te digo como me ha salido.

Por Cubel

Claber

139 de clabLevel

Genero:Masculino

Envíale un mensaje privado Email

Valencia, España

@pcubel

Citar

Escrito el 13 Nov 2009 03:04 pm

Vale este me a funcionado a la primera! con lo que hice de la web que yo puse y después e añadido lo tuyo (y e quitado lo que sobraba) ahora funciona a la perfección...

Por Cubel

Claber

139 de clabLevel

Genero:Masculino

Envíale un mensaje privado Email

Valencia, España

@pcubel

Citar

Escrito el 21 Oct 2010 03:47 pm

Hola,
el script funciona bien en Chrome, pero al hacer una precarga, en mi caso de un slideshow con imagenes, no funciona correctamente (el slide) en Firefox y en IE.
Tendrías idea de poque el conflicto?, me está faltando algun scritp para estos navegadores?.
Gracias.

Por mbascolo

48 de clabLevel

Genero:Masculino

Envíale un mensaje privado Web

Programación Sitios Web

Citar

Escrito el 21 Oct 2010 06:21 pm

Pues si puedes poner algo de código me darías una mejor idea de lo que esta pasando o el nombre de la librería que estas utilizando, puede ser que la librería cree e incluya div en el body y estos queden fuera del Div "contenido", y eso podría viera esas capas antes de la pre carga, o bien que no tengas referencias a las imágenes que forman tu galería, en ese caso hasta que inicia el slide se crean las referencias y se inicia la descargas de las imágenes.. la forma mas fácil para pre cargar imágenes es crear un <img> haciendo referencia a la imagen y colocando un style display a "none" esto hace que el explorador descargue la imagen pero con el display en no no muestra la imagen

Por wariodiaz

55 de clabLevel

Envíale un mensaje privado Web

Citar

Escrito el 21 Oct 2010 10:50 pm

Ok, te paso entonces el codigo que estoy utilizando.

LOADER.JS
window.onload=function(){
document.getElementById('menu').style.display='';
document.getElementById('banner').style.display='';
document.getElementById('banner-shadow').style.display='';
document.getElementById('charger').style.display='none';
}

INDEX.php
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="js/loader.js"></script>

<link href="css/styles-fonts.css" rel="stylesheet" type="text/css" />
<link href="css/carousel-h.css" rel="stylesheet" type="text/css" />
<link href="css/sytles-footer.css" rel="stylesheet" type="text/css" />
<link href="css/styles-home.css" rel="stylesheet" type="text/css" />

<div id="wrapper01"> 
<div id="container01">
<div id="header"><?php include("header.php"); ?></div>
<div id="menu" style="display:none;"><?php include("menu/menu_home.html"); ?></div>
<div id="banner" style="display:none;"><iframe id="iframe01" align="top" src="slide-v/slide-v-home.php" height="425" width="950" allowtransparency="yes" frameborder="0" scrolling="no"></iframe></div>
<div id="charger" align="center"><img src="img/loading.gif" /></div>
<div id="banner-shadow" style="display:none;"></div>
</div>
</div>

Esto es todo, espero se entienda.
El slide lo llamo desde un iframe (si no lo hago asi se presentan mas conflictos todavia), de esta manera funciona bien pero no en explorer ni en firefox, se puede seguir viendo las imagenes pero sin el efecto slide vertical.

Espero haber sido claro...!

Por mbascolo

48 de clabLevel

Genero:Masculino

Envíale un mensaje privado Web

Programación Sitios Web

Citar

Escrito el 04 Nov 2010 07:17 am

hola yo modifique el codigo un poco agregando 2 imagenes, un logo y una gif de carga desde la web de imagnes de varga q recomendaron en el post original
este es:

Código HTML :

<!--esto va despues de la etiqueta head antes de cualquier otra cosa-->
<script type="text/javascript"> 
window.onload=function(){ 
   document.getElementById('contenido').style.display=''; 
   document.getElementById('cargador').style.display='none';
   document.getElementById('cargador2').style.display='none';
} 
</script> 
<!--aqui termina-->

<!--esto va en laprimera linea despues del body-->
<div id="cargador" align="center">
<img src="LOGO.png" id="cargador"></div>
<div id="cargador2" align="center">
<img src="cargando.gif" id="cargador2"></div> 
<div id="contenido" style="display:none">
<!--aqui termina el codigo pero se cierra al final-->
aqui todo el contenido
<!--y antes del body de cierre debes poner el div que cierra al div "contenido"-->
</div>

Por CLAnonimo

Claber

600 de clabLevel

5 tutoriales
1 articulo

Envíale un mensaje privado Web

Este es un usuario anónimo genérico para las cuentas borradas o perdidas.

@cristalab

Preload en AJAX

Escribe una respuesta rapida