Foros del Web » Creando para Internet » HTML »

Evitar el "fade in" en las imagenes al cargar

Estas en el tema de Evitar el "fade in" en las imagenes al cargar en el foro de HTML en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 07/02/2005, 19:15
 
Fecha de Ingreso: septiembre-2004
Ubicación: Montevideo
Mensajes: 346
Antigüedad: 13 años, 2 meses
Puntos: 0
De acuerdo Evitar el "fade in" en las imagenes al cargar

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
__________________
Liber
  #2 (permalink)  
Antiguo 07/02/2005, 20:18
Avatar de codigoflecha  
Fecha de Ingreso: noviembre-2004
Mensajes: 325
Antigüedad: 13 años, 1 mes
Puntos: 3
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()">
  #3 (permalink)  
Antiguo 08/02/2005, 00:08
Avatar de caricatos
Moderador
 
Fecha de Ingreso: abril-2002
Ubicación: Torremolinos (Málaga)
Mensajes: 19.547
Antigüedad: 15 años, 8 meses
Puntos: 1262
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
__________________
Por favor:
No hagan preguntas de temas de foros en mensajes privados... no las respondo
  #4 (permalink)  
Antiguo 08/02/2005, 05:22
 
Fecha de Ingreso: septiembre-2004
Ubicación: Montevideo
Mensajes: 346
Antigüedad: 13 años, 2 meses
Puntos: 0
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
__________________
Liber
  #5 (permalink)  
Antiguo 08/02/2005, 09:32
 
Fecha de Ingreso: febrero-2005
Mensajes: 396
Antigüedad: 12 años, 10 meses
Puntos: 1
Mala idea

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
  #6 (permalink)  
Antiguo 08/02/2005, 12:36
 
Fecha de Ingreso: septiembre-2004
Ubicación: Montevideo
Mensajes: 346
Antigüedad: 13 años, 2 meses
Puntos: 0
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?
__________________
Liber
  #7 (permalink)  
Antiguo 03/04/2008, 01:22
 
Fecha de Ingreso: agosto-2005
Mensajes: 6
Antigüedad: 12 años, 4 meses
Puntos: 1
Re: Evitar el "fade in" en las imagenes al cargar

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
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 19:56.