Precarga de IMG con % de avance
Tengo un problema con una web que estoy desarrollando, es que la precarga de imágenes no muestra el avance de ella (en porcentaje), como en la precarga del flash por ejemplo. Desconociendo cuando la web esta disponible para cambiar de imágenes al hacer click en cada celda de una tabla (c/u con una imagen diferente).
La verdad no donde poner y como hacer el script, pues la precarga de imágenes me la alcanzaron por aquí también.
Me despodi gra auis
La verdad no donde poner y como hacer el script, pues la precarga de imágenes me la alcanzaron por aquí también.
Me despodi gra auis
1 respuesta
Respuesta de scriptman
1
No puedes determinar porcentaje de carga de imágenes u otro elemento con javascript, porque javascript no esta hecho para trabajar directamente con archivos o con protocolos.
Lo que si se puede hacer, es determinar cuando la página esta TOTALMENTE cargada, incluyendo imágenes.
Para esto usamos el atributo onload:
<body onload="laFuncion()">
Donde "laFuncion()" por lo general es una función de inicio, donde dependiendo lo que quieras hacer, habilita partes de la página que no se deberían de usar cuando no esta totalmente cargada, o inicializa variables, etc.
Si esto no contesta a tu pregunta.
Lo que si se puede hacer, es determinar cuando la página esta TOTALMENTE cargada, incluyendo imágenes.
Para esto usamos el atributo onload:
<body onload="laFuncion()">
Donde "laFuncion()" por lo general es una función de inicio, donde dependiendo lo que quieras hacer, habilita partes de la página que no se deberían de usar cuando no esta totalmente cargada, o inicializa variables, etc.
Si esto no contesta a tu pregunta.
Gracias por la atención:
Para aclarar, no es la carga de la web por completo, solo son las imágenes. El problema es que son muchas y el tiempo en mostrar el estado de READY es largo y no se visualiza en que avance esta.
El porcentaje es fácil de calcular tomado en cuenta la cantidad de imágenes con las que van cargando (todo esto en un array). He tratado de hacer un script para ello pero no me funciona (en la function preloadimages).
<HTML>
<HEAD><TITLE></TITLE>
<script language="JavaScript1.1">
var myimages= new Array();
var mynames = new Array();
var mynicks = new Array();
var contado = new Array();
var porcent = new Array();
mynames[0]= "A1";
mynicks[0]= "11";
mynames[1]= "B1";
mynicks[1]= "22";
mynames[2]= "C1";
mynicks[3]= "33";
function preloadimages(){
contado = myimages.length;
for (i=0;i<preloadimages.arguments.length;i++){
myimages=new Image()
myimages.src=preloadimages.arguments
porcent = i*100/contado;
alert('Cargando '+porcent+' %')
}
}
preloadimages("radio.gif","boychay.gif", "girlchat.gif")
</script>
<script>
function changed(towhat){
document.images['targetimage'].src= myimages[towhat].src;
document.isn.name.value= mynames[towhat];
document.isn.nick.value= mynicks[towhat]
}
</script>
</HEAD>
<BODY>
<CENTER>
<TABLE>
<TBODY>
<TR>
<td WIDTH=100 ALIGN=CENTER onclick="changed(0)">uno</td>
<td WIDTH=100 ALIGN=CENTER onclick="changed(1)">dos</td>
<td WIDTH=100 ALIGN=CENTER onclick="changed(2)">tres</td>
</TR>
</TBODY>
</TABLE>
<BR>
<TABLE>
<TBODY>
<FORM NAME="isn">
<TR><TD>Presentacion:</TD><TD ROWSPAN=4><IMG SRC="foto01.jpg" NAME="targetimage" WIDTH="300"></TD></TR>
<TR><TD>Nombre:</TD></TR>
<TR><TD><INPUT TYPE="text" NAME="name" VALUE=mynames[1] SIZE=40><BR></TD></TR>
<TR><TD>Nick:</TD></TR>
<TR><TD><INPUT TYPE="text" NAME="nick" VALUE=mynicks[1] SIZE=20></TD></TR>
</FORM>
</TBODY>
</TABLE>
</CENTER>
</BODY>
</HTML>
Ese es el código que estaba probando a ver si lo corriges e indicar el error, un saludo.
Para aclarar, no es la carga de la web por completo, solo son las imágenes. El problema es que son muchas y el tiempo en mostrar el estado de READY es largo y no se visualiza en que avance esta.
El porcentaje es fácil de calcular tomado en cuenta la cantidad de imágenes con las que van cargando (todo esto en un array). He tratado de hacer un script para ello pero no me funciona (en la function preloadimages).
<HTML>
<HEAD><TITLE></TITLE>
<script language="JavaScript1.1">
var myimages= new Array();
var mynames = new Array();
var mynicks = new Array();
var contado = new Array();
var porcent = new Array();
mynames[0]= "A1";
mynicks[0]= "11";
mynames[1]= "B1";
mynicks[1]= "22";
mynames[2]= "C1";
mynicks[3]= "33";
function preloadimages(){
contado = myimages.length;
for (i=0;i<preloadimages.arguments.length;i++){
myimages=new Image()
myimages.src=preloadimages.arguments
porcent = i*100/contado;
alert('Cargando '+porcent+' %')
}
}
preloadimages("radio.gif","boychay.gif", "girlchat.gif")
</script>
<script>
function changed(towhat){
document.images['targetimage'].src= myimages[towhat].src;
document.isn.name.value= mynames[towhat];
document.isn.nick.value= mynicks[towhat]
}
</script>
</HEAD>
<BODY>
<CENTER>
<TABLE>
<TBODY>
<TR>
<td WIDTH=100 ALIGN=CENTER onclick="changed(0)">uno</td>
<td WIDTH=100 ALIGN=CENTER onclick="changed(1)">dos</td>
<td WIDTH=100 ALIGN=CENTER onclick="changed(2)">tres</td>
</TR>
</TBODY>
</TABLE>
<BR>
<TABLE>
<TBODY>
<FORM NAME="isn">
<TR><TD>Presentacion:</TD><TD ROWSPAN=4><IMG SRC="foto01.jpg" NAME="targetimage" WIDTH="300"></TD></TR>
<TR><TD>Nombre:</TD></TR>
<TR><TD><INPUT TYPE="text" NAME="name" VALUE=mynames[1] SIZE=40><BR></TD></TR>
<TR><TD>Nick:</TD></TR>
<TR><TD><INPUT TYPE="text" NAME="nick" VALUE=mynicks[1] SIZE=20></TD></TR>
</FORM>
</TBODY>
</TABLE>
</CENTER>
</BODY>
</HTML>
Ese es el código que estaba probando a ver si lo corriges e indicar el error, un saludo.
Primero que nada hay que entender como trabaja el javascript:
En el "for", javascript manda cargar todas las imágenes al mismo tiempo (al tiempo de ejecución, milisegundos de diferencia) es decir, no espera a que se cargue la primera para empezar a cargar la segunda... en este caso, tiene un alert() por cada imagen, el alert SI detiene la ejecución del for, pero no quiere decir que la imagen ya esta cargada, sino que simplemente ya esta llamada a cargarse: los alerts salen consecutivos sin importar el porcentaje real de descarga de las imágenes.
Como te dije, no hay forma de determinar esto con javascript. Al parecer es una presentación de fotografías, lo que puedes hacer, para que el usuario no le de click antes de que se carguen las imágenes, es poner una div cubriendo toda la página, que diga "Cargando Presentación" y ocultarlo en el onload.
En el "for", javascript manda cargar todas las imágenes al mismo tiempo (al tiempo de ejecución, milisegundos de diferencia) es decir, no espera a que se cargue la primera para empezar a cargar la segunda... en este caso, tiene un alert() por cada imagen, el alert SI detiene la ejecución del for, pero no quiere decir que la imagen ya esta cargada, sino que simplemente ya esta llamada a cargarse: los alerts salen consecutivos sin importar el porcentaje real de descarga de las imágenes.
Como te dije, no hay forma de determinar esto con javascript. Al parecer es una presentación de fotografías, lo que puedes hacer, para que el usuario no le de click antes de que se carguen las imágenes, es poner una div cubriendo toda la página, que diga "Cargando Presentación" y ocultarlo en el onload.
