Evitar el "fade in" en las imagenes al cargar

liberfg · #1 (**permalink**) 07/02/2005, 19:15

Hola a todos,

lo que quiero es que mi sitio no empieze a cargar las imagenes y las vaya mostrando a medida que se van bajando sino que recien una vez que las haya bajado todas: las muestre, muchos sitios lo hacen por lo que debe haber una manera.

Gracias a todos, en especial al que me pueda ayudar,

Saludos

Liberfg

codigoflecha · #2 (**permalink**) 07/02/2005, 20:18

Una explicación que vi creo que en foros del web:
Bloquear el contenido de una página hasta que se carguen todos sus elementos.

Ideal para páginas con muchas imágenes o galerías.

El fin es evitar que el usuario haga clic sobre una imagen mientras otras aun estén en proceso de carga, lo cual pudiere evitar que dicho proceso culmine exitosamente.

Método 1

Este procedimiento ha sido probado tanto para Internet Explorer como para Mozilla Firefox

1.- Colocar el siguiente javascript entre <head> y </head>

<script language="JavaScript" type="text/javascript">
function muestraGranDiv(){
document.getElementById('granDiv').style.visibilit y = "visible";
document.getElementById('cargando').style.visibili ty = "hidden";
}
</script>

2.- Cargar javascript (invocar función) en body mediante evento onLoad

<body onload="muestraGranDiv()">

3.- Colocar DIVs dentro del body

<div id="cargando" style="width: 100%; height: 500px; position: absolute; padding-top:20px; text-align:center"><span class="fontloadingcont">Loading content. Please wait...</span></div>
<div id="granDiv" style="visibility:hidden;">

resto del contenido dentro del DIV

<div>

El div de id="cargando", se usaría para colocar una advertencia al usuario, con la intención de que espere mientras se carga el contenido de la página. Fíjese que, obligatoriamente este div id="cargando", debe estar antes del div id="granDiv"

Para el aviso al usuario sobre la espera mientras se carga el contenido, puede usarse una imagen en vez de texto:

<div id="cargando" style="width: 100%; height: 500px; position: absolute; padding-top:20px; text-align:center"><img src="loading_content.gif"></div>
<div id="granDiv" style="visibility:hidden;">

resto del contenido dentro del DIV

<div>

El class="fontloadingcont" es el siguiente (puede ser usado como CSS interna o en un archivo CSS externo y es opcional):

<style type="text/css">
.fontloadingcont {
font-size: 20px;
font-weight: bold;
}
</style>

Si no desea usar un estilo CSS sobre el texto, no será necesario que mantenga las etiquetas <span></span>

Método 2

Otra posible forma de conseguir el objetivo

1.- Deshabilitar los links de las imágenes para que no ejecuten la función correspondiente

<a href="pagina.htm" onclick="return false"><img src="imagen.jpg" /></a>

2.- Colocar el siguiente javascript dentro de <head> y </head>

<script type="text/javascript">
function enlaces(){
for(m=0; m<document.getElementsByTagName('a'); m++){
document.getElementsByTagName('a')[m].onclick= function(){return true}
}
}
</script>

3.- Invocar la función dentro del body, mediante el evento onLoad

<body onload="enlaces()">

caricatos · #3 (**permalink**) 08/02/2005, 00:08

Hola liberfg:

Las imágenes se van cargando a medida que son recibidas, y existe la propiedad complete (true/false) que indica que se han cargado...

En las FAQs javascript, se habla de precargas de imágenes, y creo que se puede combinar con lo que pone codigoflecha, o simplemente tenerlas ocultas y mostrarlas al cargarse.

Saludos

liberfg · #4 (**permalink**) 08/02/2005, 05:22

Hola caricatos y codigoflecha! gracias a los dos,

caricatos, como sería lo de tenerlas ocultas? busco la solución qeu requiera el menor código posible.

Saludos,

Liber

Zerjillo · #5 (**permalink**) 08/02/2005, 09:32

Lo que quieres hacer en principio es mala idea. Precisamente los navegadores estan preparados para mostrar toda la información posible, incluso imagenes incompletas para que la navegabilidad del sitio sea buena. Si un usuario tiene que esperar a que cargue la web entera, sin ver que la cosa va progresando, probablemente cerrará la página y no volverá.

Asi pues, la solución más sencilla, con menos código y más efectiva es no hacer lo que quieres hacer.

Un saludo

Zerjillo

liberfg · #6 (**permalink**) 08/02/2005, 12:36

Agradezco la sugerencia, pero me parece poco lindo, o mas bien feo.,.. que las imagenes se vayan cargando de a poco... me hace acordar a la epoca del modem 28.800 o mas atras aun....

no estas de acuerdo?

Puntella · #7 (**permalink**) 03/04/2008, 00:22

y pero man, hace que las imagenes pesen poco en un buen thumbnail y vas a ver que carga rapido hasta en un modem de 28.800, si tenes demasiadas imagenes, pagina los resultados