Imagen 'loading' al cargar página

xtremslot · #1 (**permalink**) 15/11/2006, 09:25

Buenas.

Me gustaría saber cómo se hace una cosa que creo que el planteamiento es muy sencillo, espero que la realización sea fácil también y que me podáis solucionar mis dudas ;)

Os explico un poco cómo está formada mi web:

Todo funciona desde el index, donde hay un marco flotante (I1) que muestra las páginas seleccionadas en los botones del header. Sencillo.

Ahora lo que quiero hacer:

Como las páginas están todas con imágenes pesadas donde se muestra la explicación de cada cafetería y su foto (digamos como una especie de ficha) y al haber puesto efecto de transición entre cada página, al ser la primera vez que se visita la web la imagen a la vez que hace el efecto se va cargando a trozos y queda feo. Las siguientes veces ya no porque está guardado en el ordenador del visitante, pero quiero que quede bien SIEMPRE.

Así que mi idea es poner una imagen en gif, que mientras esté cargando la página y hasta que ésta esté cargada, salga poniendo Cargando o Loading, lo típico.

¿Me podrían decir qué tengo que hacer o dónde encontrar ese código?

Me interesa que salga ese elemento hasta que la imagen esté cargada y después ya se quite el "cargando" y salga la página con la imagen y haga la transición.

Espero que esté bien explicado y os sea fácil de entender.
Espero vuestra rápida ayuda.

Saludos

EDITO: Uso FrontPage 2003

caricatos · #2 (**permalink**) 15/11/2006, 10:31

Hola xtremslot, bienvenido a los foros

:

En el foro javascript, concretamente en las FAQs puedes ver temas sobre precarga de imágenes... yo puse un tema sobre precarga con barra de progreso que supongo te puede servir.

Saludos

xtremslot · #3 (**permalink**) 15/11/2006, 15:56

Buenas

He mirado, remirado y requetemirado el FAQ y el índice de FAQ's pero no encuentro eso por ninguna parte

¿Me puedes pasar el link?

Un saludo y gracias por al ayuda.

PD: Espero que nos estemos entendiendo. Yo me refiero a un preloader que salga [Cargando...] y un gif mientras carga la página, no un PreLoad de imágenes

caricatos · #4 (**permalink**) 16/11/2006, 03:29

Hola:

Pues el mensaje que te comenté es sobre imágenes: 179.- Precarga con barra de progreso

Es que normalmente lo que ralentiza la página es el peso de las imágenes, aunque si se debe a otras cosas (un página realmente extensa) puedes poner 2 capas una visible con la imágen de "cargando..." y otra con el verdadero cuerpo de la página, y usar el onload del body para invertir las visibilidades... hace muy poco dí la misma respuesta en otro mensaje, pero no recuerdo cuál...

<body onload="carga()">
<div id="cargando">
<img src="cargando.gif" >
</div>
<div id="cargada" style="display: none">
...
</div>

Y la función carga:
function carga() {
document.getElementById("cargando").style.display = "none";
document.getElementById("cargando").style.display = "block";
}

Recuerdo que en viejas versiones de opera, los elementos con display none directamente no las procesaba... bueno, será cuestión de que pruebes.

Saludos

tunait · #5 (**permalink**) 16/11/2006, 04:02

Vamos al foro de javascript

tema trasladado desde (x)html

saludos

xtremslot · #6 (**permalink**) 16/11/2006, 07:58

EDITADO:

Ahora me he fijado. La función carga que me has puesto es en php...

No sé si has comprendido bien mi idea.

Lo que quiero es un script que muestre una barra de preload y un texto de "cargando" que dure el tiempo hasta que el explorador sepa que la imagen de la página que va a aparecer en el marco flotante está cargada completamente. LA IMAGEN, no la página. Porque si ponemos la página, fijo que la cargará y se verá como la imagen va cargando a trozos aunque la página esté activa.

Tampoco quiero un preloadres global, sino para cada página que haga esta cosa que os he dicho.

Espero que me ayudéis lo más óptimamente posible
Saludos y gracias

caricatos · #7 (**permalink**) 16/11/2006, 09:10

Cita:

Iniciado por xtremslot

EDITADO:

Ahora me he fijado. La función carga que me has puesto es en php...
...
Saludos y gracias

¿Sabes diferenciar javascript de php...

?

¿Lo has probado...

?

Por cierto, perdona mi educación ya que no te he dado la bienvenida, ASÍ QUE:

Bienvenido a los foros,

...

... y no dudes de que la ayuda es la más óptima que podemos dar... pero no esperes código personalizado, porque eso se paga... por mi parte (y por parte de la mayoría de los que participamos)... aunque no represento a nadie, sé que es la intención de los que acostumbramos a participar ayudando...

Si te parece bien, prueba lo que te recomendé, y si tienes problemas, avisa...

Saludos

xtremslot · #8 (**permalink**) 16/11/2006, 09:23

Bueno.

Ante todo perdonad mi ignorancia. Sé muy poco así de estudiado de JavaScript, de PHP, ASP, HTML y todo...

De PHP sé cambiar cosillas en los Nuke y poco más, no trabajo con ello desde 0. En HTML pues me manejo bastante bien, pero no esperéis que sepa dar códigos así de fácil y perdonad, pero tampoco sabré adaptarlos o incluso a veces entenderlos. Así que ante todo disculpas por mi ansia de respuesta rápida pero es que me "desespero" un poquillo

Respecto a tu educación, tranquilo, ya me diste la bienvenida en el primer reply y si no, no hubiese pasado nada. Gracias.

Pues es que esas funciones de:

document.getEle.....

Lo vi así parecido al lenguaje PHP, lo probé y daba error y no entiendo cómo he de hacer para que al terminar de cargar la página se quite el preload, ni si tengo que crear un archivo aparte o ese código se inserta en el <head> de mis páginas de html..

Así que insisto, perdonadme y bueno, espero que no os sea difícil explicarme un poco las dudillas que tengo.

Un saludo y gracias!

caricatos · #9 (**permalink**) 16/11/2006, 09:37

Hola:

Después de enviar el mensaje me dí cuenta de que ya te había dado la bienvenida... al menos tanto yo como la mayoría de los viejos asiduos de este foro tenemos esa costumbre...

Sobre el código que te puse, es solo una idea que pienso (por mi experiencia) que puede funcionar, pero deberás intentar adaptarlo a tu situación y probarlo... (yo tengo una carpeta con cientos de ficheros de prueba... unos funcionaron y otros no, pero son casos mios, y tus problemas tendrá que saber arreglarlos... debes tener paciencia...) no sé si es para un trabajo o para algo personal, pero sin duda la solución te servirá (aunque sea para descartarlo)

De todos modos, hay otro problema que tiene su importancia... con tu planteamiento, si alguien tiene javascript desactivado, jamás verá la página principal...

Saludos

xtremslot · #10 (**permalink**) 16/11/2006, 10:49

Pues sí, tienes razón. Es difícil saber cómo tener la web bien centrada, de resolución, de codificación para que todo el mundo lo vea bien... ojalá fuese todo más fácil...

Creo que ya he encontrado la solución que para el que no tenga JavaScript activado pasará lo mismo, pero bueno..

He pasado el index a una página de preload donde sale una barra en movimiento y el texto de "cargando". En esa página he metido un script de preload de imágenes donde se cargan todas las imágenes o fichas de mi web. Después hay una redirección que durará unos aproximadamente 10 seg y que pasará automáticamente a la página principal de la web.

¿Qué os parece, está bien así?

¿Creéis que 10 seg. es un tiempo razonable para un preload de imágenes?
*Son unas 16 imágenes en jpg y con calidad 12(máxima)hechas en photoshop.

¿Me recomendáis poner en menor calidad las imágenes o así está bien?
(Es que se ve de "cine".)

Para contratar un hosting después de pago, al tener casi todo basado en imágenes, ¿debo contratar uno con transferencia mensual superior a 10GB verdad? ó 20GB incluso?

Un saludo.
Espero que me podáis responder uno a uno los puntos y si puedes tú, caricatos, mejor ya que eres quien ha seguido el tema.
Gracias de antemano