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
