no veo mejora en la precarga de imágenes

eeeee · #1 (**permalink**) 18/07/2004, 08:59

He hecho esta precarga y tarda igual que sin ella, y no es por el peso, ya que cada imagen pesa 2k

<script language="javascript 1.2">
var i;
var imagenes = new Array('/fondos/bienveover.png', '/fondos/bienveup.png', '/fondos/hacemosup.png', '/fondos/hacemosup.png', '/fondos/linkaup.png', '/fondos/linkaup.png');
var lista_imagenes = new Array();
function cargarimagenes(){
for(i in imagenes){
lista_imagenes[i] = new Image();
lista_imagenes[i].src = imagenes[i];
}
}
</script>
<script>
cargarimagenes();
</script>

Nota: la llamada la hace así: onMouseOver="this.src = '/fondos/bienveover.png'"

Por algún sitio lei que hay un meta que no deja cargar al cliente.
cual es este meta ?
Alguna sugerencia más ?

gracias

tunait · #2 (**permalink**) 18/07/2004, 09:06

prueba así

<script language="javascript 1.2">
var i;
var imagenes = new Array('/fondos/bienveover.png', '/fondos/bienveup.png', '/fondos/hacemosup.png', '/fondos/hacemosup.png', '/fondos/linkaup.png', '/fondos/linkaup.png');
var lista_imagenes = new Array();
function cargarimagenes(){
for(i=0;i<imagenes.length;i++){
lista_imagenes[i] = new Image();
lista_imagenes[i].src = imagenes[i];
}
}
</script>
<script>
cargarimagenes();
</script>

eeeee · #3 (**permalink**) 18/07/2004, 09:30

nada, me sigue tardando igual, como si no tuviera la precarga.
yo creo que sera por los meta, voy a revisarlos, aunque no se exacto cual será
gracias tunait

caricatos · #4 (**permalink**) 18/07/2004, 11:37

Hola eeeee y tunait

:

Una precarga no hace que la página tarde menos en cargarse, pero las imágenes de sustitución (las rollover) si que se notan más rápidas...

Prueba usar en el rollover esta línea:

onMouseOver="this.src = lista_imagenes[0].src"

Yo hacía algo similar y me daba error de que no exixstía el objeto (o algo así), por eso me interesé en hacer una precarga con porcentaje de carga... y lo que hago cuando termina la precarga (o carga) es habilitar las sustituciones al terminar de cargarse en memoria...

Es bastante más trabajoso pero me parece que más efectivo...

Lo puedes ver en las FAQs.

En otra página hice otro tipo de sistema que también es efectivo que consiste en no usar precargas sino imágenes ocultas que se muestran/ocultan con el evento del ratón

Saludos

eeeee · #5 (**permalink**) 18/07/2004, 11:46

hola caricatos,
asi no hace nada, se ve un lapsus el reloj de arena y no cambia la imagen

caricatos · #6 (**permalink**) 18/07/2004, 11:56

Hola otra vez:

¿Te has fijado si se produce algún error?
Ya que no hace nada sencillamente porque no se han precargado las imágenes...
Si esperas un rato y está bien escrito, seguro que se hace el rollover sin problemas...

Saludos

eeeee · #7 (**permalink**) 18/07/2004, 12:56

no, no produce ningún error, solo que no hace el onmouseover, si el rtón lo dejo encima se nota muy breve el reloj de arena y se quita, pero sin mostrar la otra imagen

sigo vigilando a ver que pasa.
salu2

BooMeranGz · #8 (**permalink**) 19/07/2004, 04:36

Hola eeeee, imagino que caricatos te pregunta que veas el código fuente generado para saber si hay algún error, ya que seguramente la ejecución no te muestra ninguno...

Yo uso este código y aunque es extenso funciona muy bien...

Código HTML:

<head>
<script language="JavaScript1.1">
<!--
// puedes modificar aquí...
	var locationAfterPreload = "index.html" // URL a cargar luego de la precarga
	var lengthOfPreloadBar = 350 // Longitud de la barra del preload (en pixels)
	var heightOfPreloadBar = 16 // Alto de la barra del preload (en pixels)
	// Aqui van las imagenes que se precargarán.
	var yourImages = new Array(
	"imagen01.jpg",
	"imagen02.jpg",
	"imagen03.jpg",
	"imagenXX.jpg")

// No modificar "el código" desde aquí:
if (document.images) {
	var dots = new Array() 
	dots[0] = new Image(1,1)
	dots[0].src = "imgs/barra.blanca.gif" // default color de la barra (se puede colocar cualquier imagen de 1x1 px)
	dots[1] = new Image(1,1)
	dots[1].src = "imgs/barra.verde.degrade.gif" // default color del progreso de la barra, igual que el anterior
	var preImages = new Array(),coverage = Math.floor(lengthOfPreloadBar/yourImages.length),currCount = 0
	var loaded = new Array(),i,covered,timerID
	var leftOverWidth = lengthOfPreloadBar%coverage
}
function loadImages() { 
	for (i = 0; i < yourImages.length; i++) { 
		preImages[i] = new Image()
		preImages[i].src = yourImages[i]
	}
	for (i = 0; i < preImages.length; i++) { 
		loaded[i] = false
	}
	checkLoad()
}
function checkLoad() {
	if (currCount == preImages.length) { 
		location.replace(locationAfterPreload)
		return
	}
	for (i = 0; i <= preImages.length; i++) {
		if (loaded[i] == false && preImages[i].complete) {
			loaded[i] = true
			eval("document.img" + currCount + ".src=dots[1].src")
			currCount++
		}
	}
	timerID = setTimeout("checkLoad()",10) 
}
// -->
</script>
</head>

<body bgcolor="#CCCCCC">
<center>
<br>
<b><font size="+1">preload xxx.com</font></b><br>
<br>
<br>
Please be patient while some images<br>are being preloaded...
<p>
<table width="300" border="0" cellpadding="0" cellspacing="0">
  <tr>
    <td>
    <script language="JavaScript1.1">
    <!--
    if (document.images) {
    	var preloadBar = ''
    	for (i = 0; i < yourImages.length-1; i++) {
    		preloadBar += '<img src="' + dots[0].src + '" width="' + coverage + '" height="' + heightOfPreloadBar + '" name="img' + i + '" align="absmiddle">'
    	}
    	preloadBar += '<img src="' + dots[0].src + '" width="' + (leftOverWidth+coverage) + '" height="' + heightOfPreloadBar + '" name="img' + (yourImages.length-1) + '" align="absmiddle">'
    	document.write(preloadBar)
    	loadImages()
    }
    // -->
    </script>
   </td>
 </tr>
</table>
<script language="JavaScript1.1">
<!--
document.write('<p><a href="javascript:window.location=locationAfterPreload"><font size="-2">Skip Preloading</font></a>')
-->
</script>
</center>
</body>

Salu2.

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

BooMeranGz el codigo de la precarga q has puesto, una vez q se supone q ha hecho la precarga, no me redirecciona hacia la web de mi sitio a pesar de q se lo indico en el propio codigo. Sin embargo si me manda a mi sitio cuando pulso en Skip Preloading.
Sabes a q puede ser debido?, porq yo le he dao 200 mil vueltas y no se porq hace eso....
Gracias

BooMeranGz · #10 (**permalink**) 12/08/2004, 14:21

Dejame revisarlo y te digo si le veo algun problema al código...

Salu2.

BooMeranGz · #11 (**permalink**) 12/08/2004, 14:47

Mira, asi lo estoy usando y funciona, por ejemplo esta pagina se llama "preload.htm" (lo que en realidad sería el index.htm, pero yo la llamo desde una animación flash):

Código HTML:

<html>
<head>
<title>NombreSitio.com * Preload Image Page</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script language="JavaScript1.1">
<!--
// You may modify the following:
	var locationAfterPreload = "index1.php" // URL of the page after preload finishes
	var lengthOfPreloadBar = 350 // Length of preload bar (in pixels)
	var heightOfPreloadBar = 16 // Height of preload bar (in pixels)
	// Put the URLs of images that you want to preload below (as many as you want)
	var yourImages = new Array(
	"imgs/top/img11.jpg",
	"imgs/top/img12.jpg",
	"imgs/top/img13.jpg",
	"imgs/top/img14.jpg",
	"imgs/top/imgXX.jpg")

// Do not modify anything beyond this point!
if (document.images) {
	var dots = new Array() 
	dots[0] = new Image(1,1)
	dots[0].src = "imgs/barra.blanca.gif" // default preloadbar color (note: You can substitute it with your image, but it has to be 1x1 size)
	dots[1] = new Image(1,1)
	dots[1].src = "imgs/barra.verde.degrade.gif" // color of bar as preloading progresses (same note as above)
	var preImages = new Array(),coverage = Math.floor(lengthOfPreloadBar/yourImages.length),currCount = 0
	var loaded = new Array(),i,covered,timerID
	var leftOverWidth = lengthOfPreloadBar%coverage
}
function loadImages() { 
	for (i = 0; i < yourImages.length; i++) { 
		preImages[i] = new Image()
		preImages[i].src = yourImages[i]
	}
	for (i = 0; i < preImages.length; i++) { 
		loaded[i] = false
	}
	checkLoad()
}
function checkLoad() {
	if (currCount == preImages.length) { 
		location.replace(locationAfterPreload)
		return
	}
	for (i = 0; i <= preImages.length; i++) {
		if (loaded[i] == false && preImages[i].complete) {
			loaded[i] = true
			eval("document.img" + currCount + ".src=dots[1].src")
			currCount++
		}
	}
	timerID = setTimeout("checkLoad()",10) 
}
// -->
</script>
<link href="css/index1.css" rel="stylesheet" type="text/css">
</head>

<body bgcolor="#FFFFFF">
<center>
  <span class="TextoBase"><br>
  <strong><font size="+1">NombreSitio.com</font></strong><br>
  <br>
  <br>
  Please be patient while some images<br>
  are being preloaded...</span>
  <p>
  <table width="300" border="0" cellpadding="0" cellspacing="0" class="TBrestauracion">
    <tr>
      <td>
       <script language="JavaScript1.1">
       <!--
        if (document.images) {
           var preloadBar = ''
	         for (i = 0; i < yourImages.length-1; i++) {
 		       preloadBar += '<img src="' + dots[0].src + '" width="' + coverage + '" height="' + heightOfPreloadBar + '" name="img' + i + '" align="absmiddle">'
	      }
	      preloadBar += '<img src="' + dots[0].src + '" width="' + (leftOverWidth+coverage) + '" height="' + heightOfPreloadBar + '" name="img' + (yourImages.length-1) + '" align="absmiddle">'
	      document.write(preloadBar)
	      loadImages()
       }
       // -->
       </script>
      </td>
    </tr>
  </table>
<script language="JavaScript1.1">
<!--
document.write('<p><a href="javascript:window.location=locationAfterPreload"><span class="TextoBase"><font size="-2">Skip Preloading</font></span></a>')
// -->
</script>
</center>
</body>
</html>

Prueba a ver si te funciona, sinó enviame el código para ver que error puedes tener...

Salu2.

erponcios · #12 (**permalink**) 15/04/2006, 20:52

Buenas, miren tengo este código:

Código:

<script language="javascript 1.2"> 
<!-- 

var i; 

var imagenes = new Array("Images/informagestudios_03.gif" , "Images/informagestudios_04.gif" , "Images/informagestudios_05.gif" , "Images/informagestudios_06.gif" , "Images/informagestudios_07.gif" , "Images/informagestudios_27.gif" , "Images/informagestudios_14.gif" , "Images/informagestudios_16.gif" , "Images/informagestudios_18.gif" , "Images/informagestudios_20.gif" , "Images/informagestudios_22.gif" , "Images/informagestudiosrollover-03.gif" , "Images/informagestudiosrollover-04.gif" , "Images/informagestudiosrollover-05.gif" , "Images/informagestudiosrollover-06.gif" , "Images/informagestudiosrollover-07.gif" , "Images/informagestudiosrollover-14.gif" , "Images/informagestudiosrollover-16.gif" , "Images/informagestudiosrollover-18.gif" , "Images/informagestudiosrollover-20.gif" , "Images/informagestudiosrollover-22.gif" , "Images/informagestudiosrollover-27.gif" , "Images/servicios_12.gif" , "Images/portfolio_12.gif" , "Images/mapa_12.gif" , "Images/empresa_12.gif" , "Images/contactar_12.gif" , "Images/informagestudios_29.gif" , "Images/informagestudios_09.gif" , "Images/informagestudios_24.gif","Images/informagestudios_13.gif"); 

var lista_imagenes = new Array(); 

function cargarimagenes(){

   for(i in imagenes){ 
     lista_imagenes[i] = new Image(); 
     lista_imagenes[i].src = imagenes[i]; 

	} 

}

//--> 
</script> 


</head>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">

<script> 

cargarimagenes(); 

</script> 

<div align="center">

  <table id="general" width="956" height="601" border="0" cellpadding="0" cellspacing="0">
    <tr>
      <td height="183" colspan="11" background="Images/informagestudios_01.gif"></td>
	    <td>
		    <img src="Images/espacio.gif" width="1" height="183" alt=""></td>
    </tr>
    <tr>
      <td height="22" colspan="3" background="Images/informagestudios_02.gif"></td>
	    <td>
		    <img src="Images/informagestudios_03.gif" alt="Empresa" name="empresa" width="75" height="22" id="empresa"></td>
	    <td colspan="2">
		    <a href="" OnMouseOver="this.src = lista_imagenes[12].src" OnMouseOut="this.src = lista_imagenes[1].src"><img src="Images/informagestudios_04.gif" alt="Servicios" name="servicios" width="73" height="22" id="servicios"></a></td>    </tr>
  </table>

Pero cuando paso el raton por encima, me dice lo siguiente:

'lista_imagenes' no esta definido.

Alguien podría ayudarme?

Muchas gracias.