Ayuda con precarga de imagen

Diosus · #1 (**permalink**) 10/02/2006, 08:29

Hola amigos tengo un problema que ya me esta reventando... la cabeza.
Estoy desarrollando una página llamada www.plazaip.com, el problema es que lo he partido con el imagen ready y he incrustado un swf en la cabecera, hasta aqui normal, lo que me disgusta es que las imagenes aparecen saltando una tras otra por la carga, he intentado todo tipo de scripts para hacer la precarga de imagenes, la ultima lo hice con el mismo Dreamweaver 8, pero ni así me funciona, alguien puede dar con la solución. Gracias anticipadamente por la atención.

P.D.: Por favor nada de respuestas tipo: Busca en el foro algún FAQ, piensen un poco... YA LO HICE

. No seria esta la primera forma de obtenter una respuesta?. Pero no la hay... a no ser que me equivoque y no haya indagado más ¿¿¿??? Pero necesito respuestas no iniciar una exploración.

caricatos · #2 (**permalink**) 10/02/2006, 11:35

Hola:

La precarga de dreamweaver es "del montón"... la mejor es la que yo puse en las FAQs con porcentajes... pero tampoco te va a solucionar nada... Lo que tienes que hacer es asignar las dimensiones a los tags... (width, height)... Si no los sabes puedes tener la página oculta y mostrarla despues de cargar las imágenes.

Saludos

Diosus · #3 (**permalink**) 11/02/2006, 08:46

Gracias por tu respuesta muy acertada por cierto y si correcto la precarga de Dreamwever es "del montón", pero como lo mencione es ya lo ultimo que probe, la verdad es que la página la estoy rediseñando y optimizando para no usar tantas imagenes (bueno errores comunes en el desarrollo de una plantilla), me interesa mucho eso de tener oculta la página y luego mostrarla despues de cargar las imagenes, pero tengo un .swf, y me gustaria que aparezca primero el swf (que es la cabecera), y posteriormente (de mantener oculta) el contenido de golpe. Esto es programa PHP creo, la verdad es que quisiera prescindir lo menos de código, pero seria inebitable si se quiere algo bien.
Gracias Caricatos por la atención, porfavor orientame eso de mantener la página oculta y despues mostrarla.
Saludos

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

Hola otra vez:

Bueno, no sé si el efecto pueda ser bueno, pero para hacerlo, tendrías que poner el cuerpo de la página con el estilo display none o visibility hidden y chequear que esten cargadas las imágenes con el sistema que puse en las FAQs...

Más o menos:

<body onload="precargar()" style="visibility: hidden" >
...

Y la función precargar:

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

No lo he probado, pero espero que veas la idea.

Si usas display ienes que cambiar la linea que se refiere a la visibilidad de la función.

Saludos

Diosus · #5 (**permalink**) 11/02/2006, 13:15

Hola Caricatos
No se como comprobar la manera de que esten cargadas, es que me he loqueado al probar muchas formas que no recuerdo de cuql de ellas me mencionas.
Saludos, aun estoy en las pruebas

caricatos · #6 (**permalink**) 11/02/2006, 15:14

Hola otra vez:

Se ve que estas bloqueado, porque te estoy poniendo un código que creo debe ser suficiente...

Cuando las imagenes se cargan, su atributo complete se activa (se pone a true - cierto -)...

La idea es recorrer el array de imagenes (document.images) y si todos están true mostrar la página... en caso contrario hacer una llamada recursiva que vuelva a chequear todas las imágenes.

En teoría, tendrías que copiar el código que te puse e incrustarlo en tu página tal cual (aunque tal como te dije, no lo he probado)

Saludos

Diosus · #7 (**permalink**) 11/02/2006, 16:10

Bueno ahi va mi código, pues tal como me haz orientado solo sería un copy, pero ni así corre correctamente la página

<html>
<head>
<title>.:: Plaza IP ::.</title>
<meta HTTP-EQUIV="imagetoolbar" CONTENT="no"></meta>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">

</style>
<script language="javascript">

</script>
</head>
<body onLoad="precargar()" style="visibility: visible">

<table ....>...
.................... Ya no pongo todo el código sino sería marearte tambien
....................
</body>
</html>

La explicación que me das me suena un poco tecnico, algunas las comprendo pero otras. Gracias por la ayuda igualmente me sirve para orientarme

caricatos · #8 (**permalink**) 11/02/2006, 16:29

Hola:

Suerte que tengo mi probador de scripts, y encontré los problemas muy rápidamente...

la colección es document.images (no imagenes)... en eso lo copiaste mal...
faltaba cerrar el paréntesis detrás de complete (ahí me equivoqué yo)...
y debe empezarse con el body oculto... te gané 2 a 1

Bueno, te paso un código funcionando...

Código:

<html>
<head>
<title>.:: Plaza IP ::.</title>
<meta HTTP-EQUIV="imagetoolbar" CONTENT="no"></meta>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
<!--
body {background-color: #8B8B8B; margin-top: 0px; margin-bottom: 0px;}
.Estilo1 {font-family: Tahoma, Arial, Verdana; color: #FFFFFF; font-weight: bold; font-size: 11px; font-style: normal;}
.Estilo2 {font-size: 10px; color: #A79E93; font-family: Tahoma, Arial, Verdana; font-weight: normal; }
.Estilo3 {font-family: Tahoma, Arial, Verdana; color: #FFFFFF; font-size: 11px; font-weight: bold; text-decoration: underline;}
.Estilo4 { font-family: Tahoma, Arial, Verdana;
color: #4a4540;
font-weight: bold;
font-size: 12px;
}
a:link {
text-decoration: none;
color: #4A4540;
}
a:hover {
text-decoration: underline;
color: #4A4540;
}
a:active {
color: #4A4540;
text-decoration: none;
}
a:visited {
color: #4A4540;
text-decoration: none;
}
-->
</style>
<script language="javascript">
<!--
function precargar() {
imgs = document.images;
precargadas = true;
for (var i = 0, total = imgs.length; i < total; i ++)
precargadas = (precargadas && imgs[i].complete);
if (precargadas) document.body.style.visibility = "visible";
else setTimeout("precargar()", 100);
}

//-->
</script>
</head>
<body onLoad="precargar()" style="visibility: hidden">

<img src="http://www.lacabania.com/webmaster/imagen.php?id=1" />
<img src="http://www.lacabania.com/webmaster/imagen.php?id=2" />
<img src="http://www.lacabania.com/webmaster/imagen.php?id=3" />
<img src="http://www.lacabania.com/webmaster/imagen.php?id=4" />
<img src="http://www.lacabania.com/webmaster/imagen.php?id=5" />
<img src="http://www.lacabania.com/webmaster/imagen.php?id=6" />

</body>
</html>

Le metí un body sin más que imágenes...
Lo puedes copiar y pegar en el probador: www.pepemolina.com/probador/index.html (aunque hoy hay un problemilla en mi servidor)

Saludos

Diosus · #9 (**permalink**) 11/02/2006, 16:33

Bueno gracias caricato lo probare ya el lunes, pues ya salgo de mi trabajo, ese probador de Script tuyo es bueno, saludos y gracias nuevamente

Diosus · #10 (**permalink**) 13/02/2006, 08:04

Gracias caricatos de verdad gracias me solucionaste un gran problema chevere ya lo probe y corre bien pero aun estoy en busqueda de optimizar mas el sitio, gracias por la ayuda.
Saludos

mutaito · #11 (**permalink**) 29/06/2006, 15:23

E utilizado tu codigo caricatos y va de muerte!!! muchissimas gracias llevaba tiempo buscando algo asi.
Lo he utlizado para precargar imagenes y que se muestren de golpe pero en una galeria de imagenes o sea las va cargando una a una i funciona de maravilla.
Una cuestion solo si quiero poner-le algo mientras carga la imagen como un reloj o lo que sea como lo podria hacer???
muchas gracias de antemano

August · #12 (**permalink**) 29/06/2006, 15:51

mi intencion no es molestar pero a mi no me hizo la precarga

thunder.scripts · #13 (**permalink**) 29/06/2006, 16:15

¿Y si alguien tiene javascript desactivado? Directamente no vé nada :P Yo haría algo así:

Código HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<title>.:: Plaza IP ::.</title>
	<script type="text/javascript">
	<!-- /*<![CDATA[*/
	function precargar() {
		imgs = document.images;
		precargadas = true;
		
		for (var i = 0, total = imgs.length; i < total; i ++)
			precargadas = (precargadas && imgs[i].complete);
			
		if (precargadas) document.body.style.visibility = "visible";
		else setTimeout("precargar()", 100);
	}
	
	window.onload = function() {
		precargar();
	}
	
	/* ]]> */ //-->
	</script>
</head>
<body>
	<script type="text/javascript">document.body.style.visibility = 'hidden'</script>
	<img src="http://www.lacabania.com/webmaster/imagen.php?id=1" alt="" />
	<img src="http://www.lacabania.com/webmaster/imagen.php?id=2" alt="" />
	<img src="http://www.lacabania.com/webmaster/imagen.php?id=3" alt="" />
	<img src="http://www.lacabania.com/webmaster/imagen.php?id=4" alt="" />
	<img src="http://www.lacabania.com/webmaster/imagen.php?id=5" alt="" />
	<img src="http://www.lacabania.com/webmaster/imagen.php?id=6" alt="" />
</body>
</html>

Suerte,
Fede

caricatos · #14 (**permalink**) 29/06/2006, 17:50

Hola:

August: ¿Cómo lo has probado...?
Te puedo asegurar que el código es bueno... probado en explorer, opera y mozilla.

thunder.scripts: No miré tu código en detalle, pero una pregunta javascript merece una respuesta javaqscript.

mutaito: Busca en las FAQs ya que puse un código que muestra una barra de progreso.

Saludos

thunder.scripts · #15 (**permalink**) 29/06/2006, 18:28

Cita:

Iniciado por caricatos

thunder.scripts: No miré tu código en detalle, pero una pregunta javascript merece una respuesta javaqscript.

No lo cambié demasiado, simplemente oculté el body usando javascript en vez de dejarlo oculto por defecto.

Suerte
Fede

thunder.scripts · #16 (**permalink**) 29/06/2006, 18:28

Cita:

Iniciado por caricatos

thunder.scripts: No miré tu código en detalle, pero una pregunta javascript merece una respuesta javaqscript.

No lo cambié demasiado, simplemente oculté el body usando javascript en vez de dejarlo oculto por defecto.

Suerte
Fede

August · #17 (**permalink**) 29/06/2006, 18:35

Cita:

Iniciado por caricatos

August: ¿Cómo lo has probado...?
Te puedo asegurar que el código es bueno... probado en explorer, opera y mozilla.

Si es bueno, lo que haces es recorriendo desde 0 hasta cuando son cargadas, entonces en lugar de que este oculta el div, lo muestra, el problema es que la imagen que yo tengo no tiene tamaño, es un "tiempo de ejecucion", entonces por esa razon no me funciona

De cualquier manera gracias, tendre que usar un truco que creo no es el mejor, para el usuario final pero no hay otra opcion

Saludos

thunder.scripts · #18 (**permalink**) 29/06/2006, 18:46

¿Cómo que no tiene tamaño? :/

mutaito · #19 (**permalink**) 12/07/2006, 14:24

en faqs? donde? como lo busco?
Encontre un script que hacia esto de la barra de precarga funcionava con dos archivos loader1 i 2 pero funcionava perfectamente con firefox pero con el explorer no se veian las fotos....
Por cierto en vuestro codigo como puedo hacer que no se visualize la imagen pero el fondo y las letras si?

danmoti · #20 (**permalink**) 05/03/2008, 10:32

hola he probado el código de caricatos y va bien pero tengo imágenes con efectos tipo apple reflejo de agua (que se guardan como archivos ocultos) y transparencias aplicadas a imagen ¿cómo se hace que se carguen estos? ¿Es problema de visility que ins¡habilita alguna capa de transparencia ? ¿es problema de que estén ocultas?
no se si esta muy claro...
gracias de antemano

JavierB · #21 (**permalink**) 05/03/2008, 11:13

El mensaje original es de hace más de 2 años. Por favor, no reviváis temas tan antiguos.

Saludos,