Capa de carga

[Isabel_Maria]

Hola.
Uso este script del Dreamweaver mx2004 para la carga previa de imagenes usando el evento onload.
El problema es que aunque se ponga una capa de carga que se oculte con el evento onload realmente se sigue leyendo el codigo por lo que la capa se oculta y aun no se han cargado las imagenes.
Se me ocurre que si se puede ocultar la capa de carga cuando realmente las imagenes esten bajadas se solucionaria el problema ya que la capa se ocultaria cuando la funcion termine.
Lo que no se es como y que poner en el script para que cuando se acabe de bajar las imagenes oculte la capa de carga.
Gracias.

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];}}
}

[Carlitos]

Hola.

Léete etso: http://www.forosdelweb.com/showthrea...956#post786956

[Isabel_Maria]

He visto el articulo del foro y lo he puesto tal cual pero no deja la capa puesta mientras se carga. La idea es que hasta que no se tenga la seguridad de que las imagenes estan cargadas no se quite la capa pues de lo contrario el codigo continua y deja ver otros elementos que no son imagenes afeando la pagina. Hasta donde yo he logrado leer, el problema de los eventos onload es que no para el proceso como se cree, es decir, se ejecuta el onload pero el codigo continua leyendose por lo que seria mejor mostrar una capa hasta que se tenga la seguridad de que las imagenes bajaron y hecho esto quitarla. Por eso puse ese codigo de carga de imagenes pero no se donde y que poner para que oculte la capa de carga una vez finalizado el proceso.

[tunait]

Hola Isabel_Maria,

Las imágenes que cargan están insertadas mediante html en el documento?

Es decir, quieres que la capa no se oculte hasta que las imágenes que están en la página no hayan terminado de cargarse, no sin imágenes insertadas mediante javascript ¿es así?

[caricatos]

Hola a todos:

Las imágenes tienen una propiedad que se pone true cuando se terminan de cargar y false cuando no están del todo cargadas, y esa propiedad es válida tanto en objetos Image creados con javascript como con elementos html img... La propiedad en cuestión es complete
En las FAQs hay un sistema de precarga reconociendo el porcentaje, pero se trata de objetos Image, supongo que nediante la colección de tags img se puede implementar una precarga sin necesidad de "duplicar" las imágenes.
document.images[], o document.getElementsByTagName("img")

Saludos

[Isabel_Maria]

Iniciado por tunait

Hola Isabel_Maria,

Las imágenes que cargan están insertadas mediante html en el documento?

Es decir, quieres que la capa no se oculte hasta que las imágenes que están en la página no hayan terminado de cargarse, no sin imágenes insertadas mediante javascript ¿es así?

Voy a intentar recapitular haber si me hago entender.
Yo tengo una pagina en la que se cargan imagenes y texto dentro de celdas, etc. Mediante este codigo script que el Dreamweaver mx2004 pone en el evento onload uno hace una precarga de imagenes que uno mismo puede seleccionar y por tanto unas se cargarian mediante el script y las otras insertadas en el html. Una vez arranca la pagina comienza el evento onload y por tanto la precarga de las imagenes, sin embargo el proceso de carga continua en segundo plano y eso hace que el codigo se siga leyendo y poniendo texto y elementos en pantalla. Dado que las imagenes se estan cargando en segundo plano se da por finalizado el evento ocultando la capa sin embargo las imagenes no estan en pantalla dejando la pagina muy fea.
La idea es que "no se oculte la capa" hasta que las imagenes que uno ponga en carga previa esten realmente puestas en la pantalla.

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];}}
}

[caricatos]

Hola otra vez:

El preload de DW puede servir si tienes efectos rollover, si no no tienen ningún sentido.

Saludos

[Isabel_Maria]

Bien Caricatos, seguramente tendras razon, yo solo pretendia es modificar el comportamiento que trae el Dreamweaver por aquello de la comodidad ya que crear un nuevo comportamiento creo que es como ir a la luna o al menos yo no tengo ni idea.
Lo que yo pretendo es que una capa tape la pantalla mientras se cargan las imagenes. "Justo" cuando ya estan puestas en pantalla se oculte la capa y por supuesto que si se vuelve a entrar (sin que se de a recargar) no se vuelva a ejecutar la carga sino que tome de la cache las imagenes.

[caricatos]

Hola otra vez:

Supongo que se podrá hacer algo como quieres...
En vez de poner una nueva capa, que tal si ocultamos el body, usamos una precarga con el evento onload...

<body style="visibility: hidden" onload="precarga()">
...

Y precarga va chequeando las imagenes de tu página hasta que están todas cargadas (su propiedad complete a true)
<head>
<script>
function precarga() {
imagenes = document.images;
cargadas = true;
for (var i = 0; i < imagenes.length; i ++)
cargadas = cargadas & imagenes[i].complete;
if (cargadas)
document.body.style.visibility = "visible";
else
setTimeout("precarga()", 100);
}
</script>
</head>
<body...

Supongo que algo así es lo que quieres.

... He visto que eres vecina malagueña ... Un saludo de ti casi-paisano

Saludos

[Isabel_Maria]

Caricatos, gracias por tu solucion aunque no se si valga tambien para las imagenes de fondo. Somos casi vecinos, efectivamente.
Saludos.

[caricatos]

Hola otra vez:

En el caso de los fondos, creo que te valdría usar el preload de WD, ya que al chequear la colección document.images, me parece que cuentan tanto las imágenes creadas con javascript (new Image()) como las imágenes que existan en el documento con el tag img.

Prueba poniendo las imágenes que usas de fondo (supongo que te refieres con estilos... -background-image... -) en el preload de DW.

Ahora tengo que irme a trabajar, así que no lo puedo probar, además no tengo a mano ningún ejemplo para hacer pruebas, así que tendría que empezar de cero... pero si lo pruebas y te funciona, dilo para saberlo.

Bueno, saludos y felicidades.

[caricatos]

Hola otra vez:

Hice una prueba con explorer, y la colección document.images solo cuenta las imagenes del documento (etiquetas img de la página), entonces las imágenes de fondo deberías tratarlas con la precarga que propuse en las FAQs.
Si tienes problemas, no dudes en consultar.

Saludos

[Isabel_Maria]

Efectivamente, probe y las imagenes de fondo no las toma en cuenta por lo que no hay mas remedio que usar el metodo que propones. Me preguntaba y aprovechando la ocasion si sabes de un metodo para que un trozo de codigo html (no javascript) que se repite en varias paginas se pueda poner en un archivo aparte y que valga para todos los que lo llamen, es decir al estilo de los archivos .js.

Gracias Caricatos.
Muy amable.

[caricatos]

Hola otra vez:

Sobre el código repe suelo aconsejar que se ponga en un archivo js (justamente), pero con una instrucción document.write...

Por ejemplo si tienes:
<img src='imagen.gif' />

El fichero js sería:
document.write("<img src='imagen.gif' />");
Poniendo el tag "script" en donde deba aparecer la imagen.

En la página de mi perfil, la galería está hecha con ese método (la selección de galerías por años)

También se puede usar ssi, o includes si tu servidor soporta algún lenguaje como perl, php...

Saludos