Precarga de imagenes Antes de mostrar nada.

farve · #1 (**permalink**) 10/10/2008, 01:50

Hola

He echo con fireworks una division de imagenes, que son 50 en total mas 15 en rollover.
Fireworks me ha creado un script de precarga de imagenes para el rollover, para que cuando pases el cursor no tengas que esperar.

Pero yo quiero que las 50 imagenes pequeñas se vean a la vez, es decir o ninguna o todas.

He provado a poner las 50 imagenes como precarga pero no sirve, ya que onload es para cuando la pagina ya se ha cargado no?

Existe algun evento que sea que antes de mostrar nada carge lo que yo quiera??

O si no se podria poner una capa en blanco encima de las imagenes y que se oculte cuando se haya cargado todas las imagenes.

Este es el codigo que mete fireworks:

Código:

<script language="JavaScript1.2" type="text/javascript">
<!--
function MM_findObj(n, d) { //v4.01
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x && d.getElementById) x=d.getElementById(n); return x;
}
function MM_swapImage() { //v3.0
  var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
   if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
function MM_swapImgRestore() { //v3.0
  var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}

function MM_preloadImages() { //v3.0
  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

//-->
</script>

Código:

<body bgcolor="#ffffff" onload="MM_preloadImages('1.jpg','2.jpg','3.jpg','4.jpg','5.jpg'
,'6.jpg','7.jpg','8.jpg','9.jpg','10.jpg'
,'11.jpg','12.jpg','13.jpg','14.jpg','15.jpg',);">

Saludos!

caricatos · #2 (**permalink**) 10/10/2008, 02:24

Hola:

Las precargas de la mayoría de los editores no tienen mucho sentido... supongo que tendrías que tener el body oculto y mostrarlo cuando se carguen todas, y podrías usar un temporizador, o aprovechar el evento load de las imágenes para calcular si se cargaron todas para mostrar ese body:

Código:

<html>
<head>
<script type="text/javascript">
var total = 0;
var actual = 0;
var ims = new Array();
function precarga() {
	for (i = 0, imagenes = precarga.arguments, total = imagenes.length; i < total; i ++) {
		ims[i] = new Image();
		ims[i].src = imagenes[i];
		ims[i].onload = function() {actual++; if (total == actual) document.body.style.visibility = "visible";}
	}
}
</script>
</head>
<body style="visibility: hidden" onload="precarga('../dibujos/cpu.png','../dibujos/lupa.png')">
contenido del body
</body>
</html>

A ver si esto te sirve.

Saludos

farve · #3 (**permalink**) 13/10/2008, 02:59

que maquina eres!

lo unico que al final he preferido ocultar la tabla donde estan todas la imagenes y poner un gif de cargando que desaparece cuando se carga todo y con css ponerlo centrado.

Código:

ims[i].onload = function() {actual++; if (total == actual) document.getElementById("division").style.visibility = "visible";
 document.getElementById("cargando").style.visibility = "hidden";

Código:

<div>
<table border="0" style="visibility: hidden" cellpadding="0" cellspacing="0" width="970" id="division">
...
</table>
<img src="cargando.gif" id="cargando" style="position: absolute;left: 50%;top: 50%;" />
</div>

Saludos y gracias!