precarga de imagenes

Helheim · #1 (**permalink**) 12/08/2004, 10:32

Hola, alguien sabe donde puedo encontrar un script q realice una precarga de imagenes adaptable a cualquier web?, porq he encontrado alguna pero no se como adaptarla a mi web

caricatos · #2 (**permalink**) 12/08/2004, 11:55

Hola Helheim:

En las FAQs hay un par de ejemplos, y me parece que son fáciles de adaptar...

Saludos

Helheim · #3 (**permalink**) 12/08/2004, 12:02

caricatos he visto esos ejemplos pero no se como adaptarlos a mi web ... por ejemplo me interesaria el q pones tu de la barra pero no se como adaptarlo :(

DragonX · #4 (**permalink**) 12/08/2004, 12:18

entra a dynamicdrive.com

ahi tenes miles de ejemplos de lo que buscas y te dan los codigos y te explican donde ponerlos.....muy facil.

caricatos · #5 (**permalink**) 12/08/2004, 12:19

Hola otra vez:

En este sitio explico algo mejor el tema: http://www.pepemolina.com/imagenes/index.html
y también hay un ejemplo:

Básicamente es hacer la precarga con el evento onload del body:
...
<script>
var dibujos;
function inicio(){
dibujos = precarga("dibujo1.gif", "dibujo2.gif");
}
</script>

...
<body onload="inicio()">
...

Tal vez sea mejor que nos indiques tus progresos, y será mejor para orientarte.

Saludos

Helheim · #6 (**permalink**) 13/08/2004, 06:03

Caricatos te explico lo q yo hago para ver si está bien o no. Yo cojo el codigo q pones en tu pagina, este:

function precargar() {
var dibujos = new Array(precargar.arguments.length);
for (var i = 0; i < dibujos.length; i ++) {
dibujos[i] = new Image();
dibujos[i].src = precargar.arguments[i]
}
return dibujos;
}

function precargados(dibujos) {
var parciales = true;
for (var i = 0; i < dibujos.length; i ++)
parciales = (parciales && dibujos[i].complete);
return parciales;
}

function porciento(dibujos) {
var parciales = 0;
for (var i = 0; i < dibujos.length; i ++)
parciales += (dibujos[i].complete) ? 1 : 0;
return parseInt(100 * parciales / dibujos.length);
}

function precargaFichas(x) {
var dibujos = new Array(x.length);
for (var i = 0; i < dibujos.length; i ++) {
dibujos[i] = new Image();
dibujos[i].src = x[i].imagen;
}
return dibujos;
}

Este codigo lo meto en un archivo q se llama Precarga.js y lo subo a mi web. Y luego en mi pagina index.html y entre las etiquetas de <head></head> pongo esto:

<script language="javascript" src="precarga.js">

/*
precarga
*/

</script>

No se si esto q estoy haciendo es lo correcto pero la verdad es q no me sale ningun tipo de barra indicadora de q se me estan cargando las imagenes. Por otra parte en tu codigo no veo ningun array donde yo pueda meter las imagenes q yo quiero q se precarguen.
Por favor echame un cable y dime q hago mal
Gracias.

caricatos · #7 (**permalink**) 13/08/2004, 09:51

Hola otra vez:

Con eso no basta... tienes luego que hacer la precarga asociada al evento onload del body...

<body onload="fotos = precargar('foto1.gif', 'foto2.gif')" >
...
Como argumentos de precargar tienes que poner todos los ficheros que quieras precargar...

Saludos

Helheim · #8 (**permalink**) 13/08/2004, 12:05

Supongo q te refieres al body de mi pagina index.html, no?
Es decir la misma pagina donde meto el codigo:

<script language="javascript" src="precarga.js">
/*
precarga
*/
</script>

no?

Helheim · #9 (**permalink**) 13/08/2004, 12:14

Como me has dicho he puesto este codigo:

<body onload="fotos = precargar('foto1.gif', 'foto2.gif')" >

en mi pagina index.html y en el lugar de foto1.gif, etc he puesto las fotos q quiero q se precarguen pero sigue sin salirme la barra indicadora del tanto por ciento
Alguna cosa mas?

caricatos · #10 (**permalink**) 14/08/2004, 02:25

Hola otra vez:

Ese código es básico para una precarga, pero no muestra porcentaje de carga.

Te paso una página completa para que veas el efecto (en el ejemplo no se muestran las imágenes...

Código:

<html>
	<head>
		<title>
			precarga de imagenes (con barra de progreso)
		</title>
		<script>
			function precargar()	{
				var dibujos = new Array(precargar.arguments.length);
				for (var i = 0; i < dibujos.length; i ++)	{
					dibujos[i] = new Image();
					dibujos[i].src = precargar.arguments[i]
				}
				return dibujos;
			}

			function precargados(dibujos)	{
				var parciales = true;
				for (var i = 0; i < dibujos.length; i ++)
					parciales = (parciales && dibujos[i].complete);
				return parciales;
			}

			function porciento(dibujos)	{
				var parciales = 0;
				for (var i = 0; i < dibujos.length; i ++)
					parciales += (dibujos[i].complete) ? 1 : 0;
				return parseInt(100 * parciales / dibujos.length);
			}
			var imagenes;
			function continuar()	{
				alert("Ok.");
			}

			function cargando()	{
				document.getElementById("estado").style.width = porciento(imagenes) + "%";
				if (precargados(imagenes))
					continuar();
				else
					setTimeout("cargando()", 100);
			}

			function ini()	{
				imagenes = new precargar(
					"http://www.sucaricatura.com/2004/fotos/20040000.jpg",
					"http://www.sucaricatura.com/2004/fotos/20040001.jpg",
					"http://www.sucaricatura.com/2004/fotos/20040002.jpg",
					"http://www.sucaricatura.com/2004/fotos/20040003.jpg",
					"http://www.sucaricatura.com/2004/fotos/20040004.jpg",
					"http://www.sucaricatura.com/2004/fotos/20040005.jpg",
					"http://www.sucaricatura.com/2004/fotos/20040006.jpg",
					"http://www.sucaricatura.com/2004/fotos/20040007.jpg",
					"http://www.sucaricatura.com/2004/fotos/20040008.jpg"
				);
				cargando();
			}
		</script>
	</head>
	<body onload="ini()">
		<div style="position:relative; width: 100px; height: 20px; border: 1px" >
			<div style="position:absolute; top: 0; left: 0; width:100%; height: 100%; background-color: blue" >
			</div>
			<div id="estado"
style="position:absolute; top: 0; left: 0; width: 1%; height: 100%; background-color: aqua" >
			</div>
		</div>
	</body>
</html>

Tienes que poner en continuar lo que quieras que se active después de precargar las imágenes.

Saludos

Helheim · #11 (**permalink**) 14/08/2004, 06:18

No se a lo q te refieres con poner en continuar lo q quiero q se cargue....
Lo q yo quiero q haga es q una vez precargadas las imagenes, me lleve a mi pagina index.html, q es una pagina de inicio donde tengo un boton q me lleva a otra pagina q tengo q se llama home.html (la primera pagina de mi web)

Helheim · #12 (**permalink**) 14/08/2004, 06:47

O mejor ... me interesaria q esa barra de precarga se visualizara en mi pagina index.html directamente.

(Por otra parte.....)Te explico q he puesto ese codigo en una pagina q se llama precarga.html y le he metio mis fotos y lo realiza correctamente (carga la barra sin problemas) pero no me redirige a mi web index.html a pesar de q en la parte del codigo continuar() le he metido location.replace(http://www.miweb.com) y cuando lo subo todo a la web me carga la barra pero no me sale la ventana de alert("ok"), sino q se queda la ventana igual ... con la barra completa (en azul) y la ventana en blanco (no me redirige a la pagina index.html).

Por eso me gustaria q en vez de redirigirme a la pagina index.html, la precarga se realice directamente en esa pagina (index.html).

De todas formas no se si lo q he puesto de Location.replace(miweb) está bien y si asi se redirigía a otra web.

Gracias y perdona si te estoy dando mucho el coñazo pero me interesa este tema

Saludos

caricatos · #13 (**permalink**) 14/08/2004, 11:21

Hola otra vez:

No es necesario usar la función continuar(), pero la intención es que sirva para activar los scripts rollover o formularios donde pueden necesitarse las imagenes.

Una cosa que no creo aconsejable es una redirección, ya que las imágenes no podrían referenciarse.

Saludos

Helheim · #14 (**permalink**) 14/08/2004, 11:33

Entonces porq se me queda la pantalla en blanco y con la barra completada en medio de la pantalla y como puedo hacer para q despues de hacer la precarga me lleve a index.html?

caricatos · #15 (**permalink**) 15/08/2004, 04:19

Hola otra vez:

Me parece que no tienes muy claro el concepto de precarga

Una precarga tan solo deja los elementos (imágenes) listas para ser usadas, sobre todo en efectos rollover (sustituciones de imágenes) o presentaciones...
Además solo sirve para la página activa, así que si después de una precarga, haces una redirección, no te sirve de nada (aunque teóricamente las imágenes quedarían en la caché del ordenador, pero como cada navegador tiene algoritmos distintos, no es de fiar esta afirmación...

)

Justamente, lo de continuar sirve para ocultar esa barra completada, y activar los scripts que necesitan de esas imágenes. En un mensaje anterior te puse un link en donde se explicaba escuetamente como hacer una precarga (voy a explayarme un poco más) y en una capa había una presentación de diapositivas, en donde antes se hacía una precarga... si te fijas en la página, al desplegarse la capa del proyector de diapositivas, aparece una barra de progreso, y al terminar ded cargarse las imágenes es cuando se ven los controles (antes no estaban disponibles)

Espero que te sirva.

Saludos