Preload de pagina completa

Edan16 · #1 (**permalink**) 01/06/2006, 16:01

Hola chicos, como están? Largo tiempo sin entrar a ForosdelWeb, ya que me ha ido bien programando y hasta ahora no habia encontrado algun reto fuerte.

Pero se me ha pedido crear un preloader (no para flash) para unas paginas webs que tienen imagenes un tanto pesadas. Mi pregunta es: como puedo crear un preloader, no para una sola imagen, sino para una pagina completa? Puede hacerse esto? Y en caso de que no se pueda, me enseñarían una opcion buena?

Gracias de antemano por todo. Estoy dispuesto a aprender, asi que sientanse libre de responder todo cuanto gusten. Muchas gracias.

Eduardo

PatomaS · #2 (**permalink**) 02/06/2006, 08:29

Hola

Lo primero es que esto no se hace con css, las hojas de estilo son para otras cosas.

Después, aunque podrías hacer ciertas técnicas de precarga de imágenes mediante php y javascript, dependiendo del tamañpo que tengan y la cantidad que sea no se notará mucho la diferencia.

Una forma alternativa, es que uses el meta "rel", el cual es interpretado en algunos navegadores realizando una especie de "precarga" de los contenidos relacionados. Obviamente si pones 20 imágenes de 1 mega cada uno, no se notará en absoluto este trabajo.

Otra manera, es que las cargues con javascript.

Personalmente te diría que la mejor manera de evitarte problemas y de hacer las cosas amigables para el usuario, es que en la web pongas imágenes de tamaño reducido pero con suficiente tamaño como para apreciarlas y que el usuario decida si quiere o no ver la imagen grande. Para poder tomar la decisión, deberías indicarle el peso de la imagen y un tiempo estimado de descarga.

Felicidad

JavierB · #3 (**permalink**) 02/06/2006, 08:36

Hola Edan16

Como te comenta PatomaS (Saludos

) tendrías que intentarlo con JavaScript, Css solo controla la presentación:

Mensaje movido desde Css.

Saludos,

caricatos · #4 (**permalink**) 02/06/2006, 11:11

Hola:

Cuando se carga la página se activa el evento load del body (onload), pero las imágenes lo único que se carga en ese evento es su url pero no la imagen en sí.
Si tu problema es que se descuadra (o mejor, se acomoda) la página a medida que se cargan las imágenes, puedes evitar ese efecto poniendo sus dimensiones ya sea con atributos o estilos (width y height)...
En las FAQs hay un ejemplo de precarga mostrando porcentaje de carga, pero si no son para sustituciones, se duplicarían innecesariamente, pero se puede retocar ese script usando solamente las imágenes de la página desde la propia colección de imágenes... y consultando en cada ocasión el total de imágenes cargadas (las que tienen su atributo complete a true)

Si tienes dificultad para hacerlo, avisa y te damos una mano.

Saludos

Edan16 · #5 (**permalink**) 02/06/2006, 12:35

Caricatos, me gustara que me dieras una mano, ya que tu idea me parece bastante interesante, y creo que me puede ayudar a solucionar mis dudas.

Si, agradezco toda la ayuda posible que me puedan brindar. Muchas gracias.

Eduardo

chalchis · #6 (**permalink**) 02/06/2006, 13:45

<html>
<head>
<title>Documento sin título</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script type="text/javascript">
function hideLoading()
{
document.getElementById('pageIsLoading').style.dis play = 'none'; // DOM3 (IE5, NS6) only
}
</script>
</head>

<body>
<div id="pageIsLoading" style="border-right: #890000 1px solid; padding-right: 12px; background-position: 6px center; border-top: #890000 1px solid; display: block; padding-left: 44px; font-weight: bold; background-image: url(espere.gif); border-left: #890000 1px solid; width: auto; color: #000000; line-hight: 46px; border-bottom: #890000 1px solid; background-repeat: no-repeat; position: absolute; height: 46px; background-color: #e5e5e5">
<script type="text/javascript">
if (typeof window_width == 'undefined' || typeof window_height == 'undefined') {
var window_width;
var window_height;
if( typeof( window.innerWidth ) == 'number' ) {
window_width = window.innerWidth;
window_height = window.innerHeight;
} else if( document.documentElement &&
( document.documentElement.clientWidth || document.documentElement.clientHeight ) ) {
window_width = document.documentElement.clientWidth;
window_height = document.documentElement.clientHeight;
} else if( document.body && ( document.body.clientWidth || document.body.clientHeight ) ) {
window_width = document.body.clientWidth;
window_height = document.body.clientHeight;
}
}
var left = Math.round((window_width - 300) / 2);
var top = Math.round(((window_height - 46) / 3) + 46);
document.getElementById('pageIsLoading').style.lef t = left+'px';
document.getElementById('pageIsLoading').style.top = top+'px';
</script>
Cargando... Espere, por favor...
</div>
<div id="overDiv" style="position:absolute; visibility:hidden; z-index:1000;"></div>
.
.
.
.
.
.
contenido de la pagina
.
.
.
.
.
.
<script type="text/javascript">
if (window.addEventListener) {
window.addEventListener('load', hideLoading, false);
} else if (window.attachEvent) {
var r = window.attachEvent("onload", hideLoading);
} else {
hideLoading();
}
</script>
</body>
</html>

saludos

caricatos · #7 (**permalink**) 02/06/2006, 17:40

Hola:

El ejemplo de lo que te puse antes, puedes verlo en este otro mensaje: http://www.forosdelweb.com/showthrea...light=precarga

Saludos

Sette · #8 (**permalink**) 30/04/2007, 03:57

pero se puede hacer q salga un mensaje que ponga cargando o algo así?

Raulmmmm · #9 (**permalink**) 30/04/2007, 05:22

Cita:

pero se puede hacer q salga un mensaje que ponga cargando o algo así?

Creo que es esto lo que buscas:
isiajax.sourceforge.net/demos/basicos/cancel.html#cancel.php

marisolivier · #10 (**permalink**) 12/06/2007, 12:15

hola...

estoy viendo este tema que me interesa...

he probado el codigo de chalchis, pero no me carga las imagenes de la pagina...y necesito que me carge el html y, por ejemplo, la carpeta imagen, o algo asi...

chalchis · #11 (**permalink**) 12/06/2007, 12:27

algun error en particular???

saludos

marisolivier · #12 (**permalink**) 13/06/2007, 02:19

ningun error...pero solo carga el html y una vez caragado (muy rapido) empieza a cargar las imagenes...

necesito que carge las imagenes antes de mostrar el html...

caricatos · #13 (**permalink**) 13/06/2007, 02:40

Cita:

Iniciado por marisolivier

ningun error...pero solo carga el html y una vez caragado (muy rapido) empieza a cargar las imagenes...

necesito que carge las imagenes antes de mostrar el html...

Hola:

Parece que no leíste bien el desarrollo de este tema: Si tu problema es que se descuadra ...

Más o menos debes tener oculto el body con estilos ya sea con display o visibility, y en el head poner un script más o menos así:

function cargando() {
cargadas = true;
for (i = 0, total = document.images.length; i < total; i ++)
cargadas = cargadas && document.images[i].complete;
if (cargadas) document.body.style.visibility = "visible";
else setTimeout("cargando()", 100);
}

Saludos

chalchis · #14 (**permalink**) 13/06/2007, 07:22

creo que marisolivier deberias mostrar lo que realmente deseas hacer
= alguien mas publique una solucion mas rapida

saludos

caricatos · #15 (**permalink**) 13/06/2007, 08:14

Cita:

Iniciado por chalchis

creo que deberias mostrar lo que realmente deseas hacer
= alguien mas publique una solucion mas rapida

saludos

No sé porqué, me parece que tú tampoco has leído el desarrollo del mensaje...

Saludos

chalchis · #16 (**permalink**) 13/06/2007, 09:40

je el mensaje fue para marisolivier

saludos

dblanco · #17 (**permalink**) 13/06/2007, 14:45

como comenta caricatos, la cosa es tan sencilla como meter todo el contenido del body en un div que esté oculto, mientras mostramos otro div con por ejemplo un gif animado que ponga "cargando". Cuando la página está cargada ocultamos el div que pone "cargando" y visualizamos el que tiene el contenido de la página con el evento Onload.

saludos

marisolivier · #18 (**permalink**) 14/06/2007, 05:45

esta solucion me parece bastante buena...

me podrias pasr un codigo que funcciones?...

gracias

marisolivier · #19 (**permalink**) 14/06/2007, 05:46

Cita:

Iniciado por caricatos

Hola:

Parece que no leíste bien el desarrollo de este tema: Si tu problema es que se descuadra ...

Más o menos debes tener oculto el body con estilos ya sea con display o visibility, y en el head poner un script más o menos así:

function cargando() {
cargadas = true;
for (i = 0, total = document.images.length; i < total; i ++)
cargadas = cargadas && document.images[i].complete;
if (cargadas) document.body.style.visibility = "visible";
else setTimeout("cargando()", 100);
}

Saludos

voy a probar eso tambien...

gracias!...

marisolivier · #20 (**permalink**) 14/06/2007, 05:49

Cita:

Iniciado por chalchis

creo que marisolivier deberias mostrar lo que realmente deseas hacer
= alguien mas publique una solucion mas rapida

saludos

estoy reaciando mi web:

http://www.ofgms.com/clientes/ofgms/

y como veis tarda mucho en cargarse las imagenes y no quiero que se pueda entrar porque sino descuadra todo...

marisolivier · #21 (**permalink**) 14/06/2007, 05:51

Cita:

Iniciado por marisolivier

Cita:

Iniciado por caricatos

Hola:

Parece que no leíste bien el desarrollo de este tema: Si tu problema es que se descuadra ...

Más o menos debes tener oculto el body con estilos ya sea con display o visibility, y en el head poner un script más o menos así:

function cargando() {
cargadas = true;
for (i = 0, total = document.images.length; i < total; i ++)
cargadas = cargadas && document.images[i].complete;
if (cargadas) document.body.style.visibility = "visible";
else setTimeout("cargando()", 100);
}

Saludos

voy a probar eso tambien...

gracias!...

he probado el codigo lo podeis ver aqui:

http://www.ofgms.com/clientes/ofgms/home.html

como hago para que se vea algo mientras se carga eso?...

marisolivier · #22 (**permalink**) 14/06/2007, 06:19

ademas muestra el html y sigue luego cargando imagenes...

:\

dblanco · #23 (**permalink**) 14/06/2007, 06:27

a ver tu haces esto:

Código:

<body oncontextmenu="return false" onLoad="precargar()" style="visibility: hidden">
<!-- CONTENEDOR -->
<div id="contenedor">

y lo que tienes que hacer es esto:

Código:

<body oncontextmenu="return false" onLoad="precargar()" >
<!-- CONTENEDOR -->
<div id="contenedor" style="visibility: hidden">

entonces si quieres que se vea algo mientras carga, creas un div fuera de "contendor" visible. Y en el onLoad del body, haces que cuando haya cargado haga visible "contenedor" y oculto el otro div.

Eso es todo. A propósito muy buenas ilustraciones, un trabajo excelente.

Saludos

marisolivier · #24 (**permalink**) 14/06/2007, 09:22

si me pasas el codigo para el div visible que me comentas estaria encantado!...

gracais por tu comentario sobre mi trabajo...

dblanco · #25 (**permalink**) 14/06/2007, 10:38

ejemplo sencillo

Código:

<body onLoad="document.getElementById('precarga').style.visibility='hidden';document.getElementById('contenedor').style.visibility='visible';" >

<div id="contenedor" style="visibility: hidden">
...
</div>

<div id="precarga" style="visibility: visible">
cargando página por favor espere
</div>


</body>

espero que ahora ya lo tengas claro ;)

chalchis · #26 (**permalink**) 14/06/2007, 14:22

un comentario si tratamos de visualizar imagenes al cargar la pagina
podriamos usar miniaturas y posteriormente mostrar la imagen a ver completamente

no se que opinen amigos.

y porcierto felicidades a los que han posteado scripts para este tema

saludos amigos

marisolivier · #27 (**permalink**) 18/06/2007, 03:24

Cita:

Iniciado por dblanco

ejemplo sencillo

Código:

<body onLoad="document.getElementById('precarga').style.visibility='hidden';document.getElementById('contenedor').style.visibility='visible';" >

<div id="contenedor" style="visibility: hidden">
...
</div>

<div id="precarga" style="visibility: visible">
cargando página por favor espere
</div>


</body>

espero que ahora ya lo tengas claro ;)

me da error de javascript: no se pudo obtener la propiedad visibility. argumento no valido

dblanco · #28 (**permalink**) 18/06/2007, 04:26

asegúrate de que el nombre que pongas dentro de getElementById('') coincida con el ID del Div.

marisolivier · #29 (**permalink**) 18/06/2007, 04:40

lo he puesto tal como lo distes...

JavierB · #30 (**permalink**) 18/06/2007, 09:06

Hola marisolivier

He probado el código de dblanco y no me ha dado ningún error

Saludos,