Foros del Web » Programando para Internet » Javascript »

Acabar de pulir la precarga de imagenes....

Estas en el tema de Acabar de pulir la precarga de imagenes.... en el foro de Javascript en Foros del Web. Buenos días a todos. Resulta que tengo este script de precarga de imagenes... <script language="javascript"> <!-- function precargar() { imgs = document.images; precargadas = true; ...
  #1 (permalink)  
Antiguo 28/03/2010, 05:17
 
Fecha de Ingreso: marzo-2010
Mensajes: 30
Antigüedad: 14 años, 1 mes
Puntos: 0
Acabar de pulir la precarga de imagenes....

Buenos días a todos.

Resulta que tengo este script de precarga de imagenes...

<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>

que luego le llamo desde el body....

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

Vale, me funciona bien, me oculta todo mientras se cargan las imagenes de la pagina y luego me enseña la web....

Lo unico que llevo rato intentando y no soy capaz... es de que salgo algun gif o un texto mientras que ponga "cargando...."

No debe ser muy dificil pero por mas que lo intento soy incapaz :S

Gracias a todos.
  #2 (permalink)  
Antiguo 28/03/2010, 05:36
Avatar de caricatos
Moderador
 
Fecha de Ingreso: abril-2002
Ubicación: Torremolinos (Málaga)
Mensajes: 19.607
Antigüedad: 22 años
Puntos: 1284
Respuesta: Acabar de pulir la precarga de imagenes....

Hola:

Me parece que el código que tienes lo publiqué yo hace algún tiempo (o al menos es mi estilo...), te cuento un par de cosas para que consigas tu objetivo...

Si la imagen que quieres poner es con un tag img, sería parte del array de imágenes, así que también se contabilizaría en el script... aunque no creo que cambiase mucho, ya que tal vez sea la primera de imágenes a leer.

Pero también puedes poner encima de la página una capa con la imagen de fondo centrada con estilos, y de esa forma evitarías que ese mismo gif sea parte del array de imágenes (document.images)

la idea es algo así:

<body>
...

<div id="ocultador" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: white url(cargando.gif) no-repeat center center"></div>
</body>

Otro apunte es que en vez de temporizar una rutina para consultar el estado de carga de las imágenes, podrías programar el evento asociado...

var total;

function cargada() {
if (--total == 0) // se cargaron todas
document.getElementById("ocultador").style.visibil ity = "hidden";
}

window.onload = function() {
total = document.images.length;
for (i = 0; i < total; i++) document.images[i].onload = cargada;
}

Lo puse "a capella", pero lo importante es que pilles la idea.

Saludos
__________________
Por favor:
No hagan preguntas de temas de foros en mensajes privados... no las respondo
  #3 (permalink)  
Antiguo 28/03/2010, 05:50
 
Fecha de Ingreso: marzo-2010
Mensajes: 30
Antigüedad: 14 años, 1 mes
Puntos: 0
Respuesta: Acabar de pulir la precarga de imagenes....

Hola!

Gracias por contestar.

En primer lugar el codigo lo poesteaste en un post anterior, cierto, y te lo agradezco pq me ha servido de mucho.

He provado lo que me has dicho....

....
<%
rs.close
rs2.close
rs3.close
bajo
%>
<div id="ocultador" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: white url(img/cargando.gif) no-repeat center center"></div>
</body>
</html>

Pero lo que hace es, que al cargar la pagina como antes, la capa se pone encima de toda la web sin mostrar la web despues de cargarla... :S

Gracias.
  #4 (permalink)  
Antiguo 28/03/2010, 08:11
Avatar de caricatos
Moderador
 
Fecha de Ingreso: abril-2002
Ubicación: Torremolinos (Málaga)
Mensajes: 19.607
Antigüedad: 22 años
Puntos: 1284
Respuesta: Acabar de pulir la precarga de imagenes....

Hola:

Si todas las imagenes se cargan bien, creo que debería funcionar... prueba cambiando el 0 por el 1, pero sobre todo asegúrate de que las imágenes se cargan... yo suelo usar alertas (aunque durante las pruebas es mejor usar pocas imágenes)... por cierto, creo que hay un tema en las FAQs planteando mostrar el porcentaje de carga.

Saludos
__________________
Por favor:
No hagan preguntas de temas de foros en mensajes privados... no las respondo
  #5 (permalink)  
Antiguo 28/03/2010, 08:28
 
Fecha de Ingreso: marzo-2010
Mensajes: 30
Antigüedad: 14 años, 1 mes
Puntos: 0
Respuesta: Acabar de pulir la precarga de imagenes....

Me funciona bien la carga de imagenes como al principio lo tengo, lo que no me sale es la capa cargando mientras se cara la pagina. Me sale al final despues de cargar toda la web.

Mi intencion es ke la capa mientras carga. :s
  #6 (permalink)  
Antiguo 28/03/2010, 15:50
 
Fecha de Ingreso: marzo-2010
Mensajes: 30
Antigüedad: 14 años, 1 mes
Puntos: 0
Respuesta: Acabar de pulir la precarga de imagenes....

He intentado de todo y no lo consgio, alguna idea? solo me keda insertar la capa con el mensaje de cargando mientras lo hacer :S
  #7 (permalink)  
Antiguo 28/03/2010, 16:07
Avatar de caricatos
Moderador
 
Fecha de Ingreso: abril-2002
Ubicación: Torremolinos (Málaga)
Mensajes: 19.607
Antigüedad: 22 años
Puntos: 1284
Respuesta: Acabar de pulir la precarga de imagenes....

Hola:

Estuve mirando el código, y veo que no salta el evento, y creo que es porque al obtener las imágenes desde la caché, siempre están cargadas... creo que se soluciona con objetos del tipo Image(); para mañana lo compruebo...

Saludos
__________________
Por favor:
No hagan preguntas de temas de foros en mensajes privados... no las respondo
  #8 (permalink)  
Antiguo 28/03/2010, 16:10
 
Fecha de Ingreso: marzo-2010
Mensajes: 30
Antigüedad: 14 años, 1 mes
Puntos: 0
Respuesta: Acabar de pulir la precarga de imagenes....

Gracias por todo.
  #9 (permalink)  
Antiguo 28/03/2010, 21:31
Avatar de caricatos
Moderador
 
Fecha de Ingreso: abril-2002
Ubicación: Torremolinos (Málaga)
Mensajes: 19.607
Antigüedad: 22 años
Puntos: 1284
Respuesta: Acabar de pulir la precarga de imagenes....

Hola:

El truco del almendruco va a ser reasignar el src...

window.onload = function() {
total = document.images.length;
for (i = 0; i < document.images.length; i++) with(document.images[i]) {
onload = cargada;
src = src;
}
}

Lo acabos de probar y parece ir bien...

Saludos
__________________
Por favor:
No hagan preguntas de temas de foros en mensajes privados... no las respondo
  #10 (permalink)  
Antiguo 29/03/2010, 02:17
 
Fecha de Ingreso: marzo-2010
Mensajes: 30
Antigüedad: 14 años, 1 mes
Puntos: 0
Respuesta: Acabar de pulir la precarga de imagenes....

Buenos días,

Esta ultima funcion no me ha funcionado del todo bien, se me deforma igual que al principio la web me explico......

Uso este otro script para amoldar las imagenes....

<script language="javascript">
/************************************************** Redimensionar imágenes. Script creado por Tunait! (31/7/2003)
Si quieres usar este script en tu sitio eres libre de hacerlo con la
condición de que permanezcan intactas estas líneas, osea, los créditos.
No autorizo a publicar y ofrecer el código en sitios de script sin
previa autorización
Si quieres publicarlo, por favor, contacta conmigo.
http://javascript.tunait.com/
[email protected]
******************************************* ******/
var maxAncho = 115 //define la anchura máxima de la imagen
var maxAlto = 115 //define la altura máxima de la imagen
function fotilla(ancho,alto,cual)
{
if (ancho > alto) {forma = 'apaisada'}
if (ancho < alto) {forma = 'retrato'}
if(forma == 'apaisada')
{
if(ancho > maxAncho)
{
porcientoAnchura = parseInt(maxAncho/ancho*100)
cual.width = maxAncho
cual.height = porcientoAnchura*alto/100
}
}
else if (forma == 'retrato')
{
if (alto > maxAlto)
{
porcientoAltura = maxAlto/alto*100
cual.height = maxAlto
cual.width = porcientoAltura*ancho/100
}
}
}
</script>

Entonces lo que hace es cargar las imagenes a gran tamaño y luego redimensionarlas (asi que se deforma toda la web mientras carga....)

SOLUCIONADO (LA DEFORMACION): Con tu primera funcion.....

<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>

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

Me oculta todo el contenido y así el usuario no ve las deformaciones. y luego carga la web bien...

Lo unico que mientras carga, el usuario puede pensar que la web se ha bloqueado o algo, así que me interesaría que viera un mensaje o una imagen de cargando....

Perdon por el toston.

Y muchas gracias por el interes, se agradece.
  #11 (permalink)  
Antiguo 29/03/2010, 02:29
Avatar de caricatos
Moderador
 
Fecha de Ingreso: abril-2002
Ubicación: Torremolinos (Málaga)
Mensajes: 19.607
Antigüedad: 22 años
Puntos: 1284
Respuesta: Acabar de pulir la precarga de imagenes....

Hola:

Pues entonces, si te sirve el primer ejemplo (también debería funcionar el segundo), con los cambios sugeridos antes...

<div id="ocultador" style="... ></div>
</body>

if (precargadas) document.getElementById("ocultador").style.visibil ity = "hidden";

Sería la misma idea... una capa ocultando el contenido, y dentro de esa capa el gif animado...

Por cierto, aunque no tengo dudas de que el script de tunait es muy bueno , El peso de las imágenes de esa manera no varía, y por lo tanto es la misma transferencia... si dispones de php se reducen las imagenes fácilmente, y a la vez se reduce el peso.

Saludos
__________________
Por favor:
No hagan preguntas de temas de foros en mensajes privados... no las respondo
  #12 (permalink)  
Antiguo 29/03/2010, 03:46
 
Fecha de Ingreso: marzo-2010
Mensajes: 30
Antigüedad: 14 años, 1 mes
Puntos: 0
Respuesta: Acabar de pulir la precarga de imagenes....

Hola,

Poniendo la capa antes de acabar el body no me la muestra....

He probado esto.... a ver si lo hacia y si, mientras carga muestra el fondo azul

<style type="text/css">
<!--
body {
background-color: #000033;
}
-->
</style>

Entonces pienso que poniendo la capa en el css me la mostrará mientras carga y luego la ocultara con el

if (precargadas) document.getElementById("ocultador").style.visibil ity = "hidden";

¿Como puedo poner una capa en un css? :s Es algo que nunca he echo y creo que solucionará mi problema.

Gracias
  #13 (permalink)  
Antiguo 29/03/2010, 04:14
Avatar de caricatos
Moderador
 
Fecha de Ingreso: abril-2002
Ubicación: Torremolinos (Málaga)
Mensajes: 19.607
Antigüedad: 22 años
Puntos: 1284
Respuesta: Acabar de pulir la precarga de imagenes....

Hola:

La capa antes del cierre del body deberías posicionarla como puse antes:

<body>
...

<div id="ocultador" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: white url(cargando.gif) no-repeat center center"></div>
</body>

Hay cosas muy importantes... position: absolute, y los valores de top, left, width y height como están (aunque se podría obviar el width...), y darle un color de fondo porque sino por defecto suelen ser "transparent"... y el tema de la imagen, si el body tiene un scroll podría no verse (aunque creo que sí...)

De todos modos te preparé un ejemplo completo:

Código:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>
	http://www.caricatos.net/probador
</title>
<script type="text/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.getElementById("ocultador").style.visibility = "hidden";
else setTimeout("precargar()", 100);
}

window.onload = precargar;
</script>
</head>
<body>
<img src="../fotos/carnaval-almeria.jpg" />
<img src="../fotos/CostadelSol.jpg" />
<img src="../fotos/castillo-Almeria.jpg" />
<img src="../fotos/volando.jpg" />
<img src="http://www.sucaricatura.com/2002/fotos/2002V087.jpg" />

<div id="ocultador" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: white url(../dibujos/reloj.gif) no-repeat center center"></div>

</body>
</html>
Lo puedes pegar directamente en este Probador de scripts

Lo de las redimensiones deberás adaptarlo.

Saludos
__________________
Por favor:
No hagan preguntas de temas de foros en mensajes privados... no las respondo
  #14 (permalink)  
Antiguo 29/03/2010, 06:17
 
Fecha de Ingreso: marzo-2010
Mensajes: 30
Antigüedad: 14 años, 1 mes
Puntos: 0
Respuesta: Acabar de pulir la precarga de imagenes....

Hola de nuevo,

El script ultimo que me has puesto, en el probador de scripts funciona perfectamente.

Al implementarlo en mi pagina, no me funciona :s no me sale el reloj de carga ni tampoco me las carga antes de cargar las imagenes. Cosa que no entiendo :S.

No se si sera pq al cargar imagenes grandes y al hacerlas pekeñas con el script hace una scroll muy grande....

Me serviria para completar lo que quiero hacer una capa dentro del css del body.

Así que me decanto por una nueva pregunta del post....

¿Puedo poner una capa dentro de un css? algo asi....

body {
background......
<div................> Cargando.... </div>
}

¿Como podría hacerlo?

Gracias por todo.
  #15 (permalink)  
Antiguo 29/03/2010, 14:54
 
Fecha de Ingreso: marzo-2010
Mensajes: 30
Antigüedad: 14 años, 1 mes
Puntos: 0
Respuesta: Acabar de pulir la precarga de imagenes....

se puede poner una div donde indico?
  #16 (permalink)  
Antiguo 15/03/2011, 02:00
 
Fecha de Ingreso: abril-2006
Mensajes: 11
Antigüedad: 18 años
Puntos: 0
Respuesta: Acabar de pulir la precarga de imagenes....

Yo he puesto el código inicial del primer post, funciona todo bien, pero tengo un problema con la pregarga de imágenes al usar la utilidad cufon replace para convertir textos en imágenes de texto. No se cargan. ¿Alguna idea?
  #17 (permalink)  
Antiguo 15/03/2011, 02:25
Avatar de caricatos
Moderador
 
Fecha de Ingreso: abril-2002
Ubicación: Torremolinos (Málaga)
Mensajes: 19.607
Antigüedad: 22 años
Puntos: 1284
Respuesta: Acabar de pulir la precarga de imagenes....

Hola:

alfonsog: Para nuevas preguntas debes iniciar temas nuevos. Te invito a que lo hagas.

Saludos
__________________
Por favor:
No hagan preguntas de temas de foros en mensajes privados... no las respondo

Etiquetas: imagenes, precarga
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Tema Cerrado




La zona horaria es GMT -6. Ahora son las 07:12.