Duda: Cargar imagenes al mismo tiempo - Sitio Web

[Dago]

Gente:
Tengo dos imágenes en mi página.
1- En una tabla como imagen de fondo.
2- Un object en el cual, la imagen tiene un efecto de fade.

Necesitaria si alguno de ustedes me puede orientar, para que carguen al mismo tiempo, es decir, que no me aparezca primero una y luego la otra…
Desde ya… MIL GRACIAS!

[ivangc]

No sé muy bien a que te refieres, si puedes especificar mejor, te podré dar más ayuda.
Si lo que quieres es que las dos imagenes de descargen al mismo tiempo, lo que se suele utilizar bastante ultimamente es meter las dos imagenes en un mismo fichero, para así no tener que esperar a descargar la imagen secundaria la primera vez. Esto tambien ahorra tiempo de descarga, puesto que es mejor descargar un fichero algo grandote que varios pequeños. Mira como lo hace youtube:
http://s.ytimg.com/yt/img/master-vfl44411.gif
Con eso se consigue obtener todas las imagenes de golpe y luego con la propiedad CSS background-position puedes ir cortando la imagen.
No sé si es esto a lo que te refieres.....
Un saludo ;)

[Dago]

Querido Ivangc

Antes que nada… Gracias por el tiempo 
El tema es el siguiente.
Supongamos que tengo dos imágenes.
Una llamada gato.jpg y otra perro jpg.
Ambas se encuentran en una página “equis”, pero la imagen perro, pesa 10 veces (a modo de ejemplo) más que la otra.
Problema: Primero carga la imagen gato.jpg y luego la imagen perro.
(Quisiera mantenerlas separadas).
La idea es que carguen ambas imágenes y luego, aparezcan al mismo tiempo.
No sé si me habré explicado.

Millones de gracias :D

[derkenuke]

Hola Dago:

No sé si habrás probado la solución de ivangc, puede ser efectiva. Pero si hablamos de imágenes grandes no sé cómo responderá eso.

Podemos hacer lo siguiente:

Código PHP:

  <img src="http://www.spp.ee.kth.se/res/tools/mms/MMSposter-large.jpg" style="width: 660px; height: 510px; visibility:hidden;" onload="this.style.visibility='visible'" /> 
   

Con ese onload logramos que no se muestre hasta que esté totalmente cargada la imagen.

Podemos colocar una función en el onload de dos imágenes (A y B) que las haga visibles únicamente si las dos están cargadas. Me explico:

Código PHP:

  <img id="im1" src="http://www.spp.ee.kth.se/res/tools/mms/MMSposter-large.jpg" style="width: 660px; height: 510px; visibility:hidden;" onload="mostrarLasDos(this, $('im2'))" />
<img id="im2" src="http://www.oakstore.de/out/oxbaseshop/html/0/dyn_images/icon/oakley_large_duffel_black_46_ico.jpg" style="width: 46px; height: 42px; visibility:hidden;" onload="mostrarLasDos(this, $('im1'))" />
 
<script type="text/javascript">
<!--
 
 
// document.getElementById abreviado
function $(x) { return document.getElementById(x); }
 
function mostrarLasDos(imagenCargada, imagenAconsultar) {
    // imgCargada estará ya cargada porque ha saltado el evento onload.
    if( imagenAconsultar.complete ) {            // si está cargada la imagen a la que tengo que esperar muestro ya las dos
        imagenCargada.style.visibility = imagenAconsultar.style.visibility = "visible";
    }
}
 
// -->
</script> 
  

Aquí tenemos una imagen grande im1 (336600px² y 3535.41 KB) y una imagen pequeña im2 (1932px² y 1.96 KB). Se trata de hacer saltar la misma función en el evento onload de cada una, y esa función mostrarLasDos() se encarga de preguntar a la imagen pareja si está ya cargada y se pueden mostrar las dos, o por el contrario hay que esperar a que se siga cargando.

Obviamente este método se puede extender a todas las imagenes que quieras, colocando más condicionales.


Espero que ésto te ayude.
Saludos

[Dago]

¡Clap clap!
Derkenuke: Mil gracias. La verdad que me has dedicado un tiempo que estimo más que valorable. Nuevamente gracias.

Pero… (risas) Siempre hay una duda que sucede a otra. (En este caso, la segunda es la vencida).

Pensando, se me vino a la cabeza la idea de una gran imagen, como imagen de fondo de una tabla, y un archivo swf.

Cómo se aplicaría lo anterior para:
- Una imagen de fondo de una tabla.
- Un archivo swf (flash) / Etiqueta OBJECT

Partiendo de la misma lógica anterior: Que carguen al mismo tiempo.

NUEVAMENTE gracias.

¿Qué sería de mi sin ustedes? :D

[derkenuke]

De nada Dago, para eso estamos

Para un fondo de una tabla (supongo que aplicado con CSS) no sé nada, hay muy poquito que manejar para los fondos.

Existe la precarga de imagenes (new Image()), de la que tendrías que investigar un poco. Si el navegador tiene la caché de imagenes activada, se supone que una vez cargada una imagen, todas las que sean iguales las cargará de la cache (evitando peticiones al servidor, tiempo de carga... etcétera). Así que me atrevo a decir que si incluyes la misma imagen del fondo de la tabla como imagen normal <img> en alguna parde del documento (oculta si quieres) se cargarán al mismo tiempo las dos. Con eso tendríamos un "avisador" de cuando se ha cargado la imagen de fondo.

Moviendo un poco las neuronas supongo que podrías sacar algo para los fondos, pero para los objetos SWF no tengo ni idea, no sé si funciona el evento onload ahí, o si flash es capaz de llamar a funciones javascript.


Saludos.