¿Como cargar un iframe antes que una imagen?

[IMAC/]

Buenas

Resulta que me he dado cuenta que, al menos en el firefox, una imagen que tarda en cargar un poco por su tamaño en Kbs impide que se muestre el contenido de un iframe hasta que la imagen no está cargada.

Supongo que existe alguna prioridad dentro del documento que impide cargar al iframe hasta que termina de cargar una imagen.

¿Cómo puedo evitar esto y hacer cargar el iframe aunque la imagen no haya terminado de cargar?

Gracias.

[emprear]

No es solo el orden, sino como estén siendo servidos los diferentes elementos desde su origen, por ejemplo, la url que carga tu iframe, está en tu mismo dominio o es externa? Que tipo de imagen estás usando, si es un jpg progresivo, el navegador lo va a ir mostrando a medida que reciba datos, aunque la imagen no se haya cargado completamente, si no va a esperar que se cargue en memoria toda la imagen, para recien continuar. Otro factor, que tamaño tiene tu imagen, y que tamanño tiene el contenido de tu iframe. Hacer un "preload" de algunos elementos, puede ayudarte también, como ves no hay una solución universal.
Una buena herramienta de análisis para ver como se están cargando las cosas la podés encontrar en
http://tools.pingdom.com/

Saludos

[IMAC/]

Ok, te informo emprear:

- Se trata de una imagen en .png generada mediante una página .php que la devuelve por el header("Content -Type image/png)

- El tamaño de la imagen, como te comenté, es relativamente grande: 192Kb.

-El iframe carga una URL interna y su contenido ocupa bastante menos, tal vez 10Kb.


Ah, y la página que me has dado para probar los tiempos de carga no me sirve en este caso porque el contenido se carga tras ciertas acciones javascript.

Un saludo y gracias.

[emprear]

Primero, ver la posibilidad de comprimir el png,al menos en los jog en php podés establecer un nivel de compresión
http://php.apsique.com/manuales_logi...presionpng.htm

Después, ver que pasa si precargas el html del iframe(y las imágenes si la tuviese) y el PNG, habria que experimentar, pero supongo, que la página entera globalmente, tardaría más en cargar, pero no habria demoras entre la visualización de la imagen y el contenido del iframe.

Con jquery podes precargar no solo imágenes, tambien html, css, js y php. yo lo hago asi
en el head

Código Javascript:

<script type="text/javascript">
//<![CDATA[
$.PrecargarContenido = function(){
for(var i = 0; i<arguments.length; i++){
$("#preload").load(arguments[i])
}
}
//]]>
</script>
 

en el body creas una capa con id=preload, le das 0px de width y height, es decir que esté escondida

y antes del cierre en el body, el array de elementos que querés precargar

Código Javascript:

<script type="text/javascript">
//<![CDATA[
$.PrecargarContenido(
'/load/menuterminos.jpg',
'/load/menucarac.css',
'/load/menufaq.php',
'/img/bullet_on.png',
'/load/menucontactenos.php'
);
//]]>
</script>
 

También ayudaría que hagas un adecuado cacheo de las imágenes con los headers apropiados, en .htaccess sería conveniente

En cuanto al link que te recomendé, si te fijas , te analiza cuanto tarda en cargar cada elemento individualmente.

Aunque indudablemente, el problema mayor es que la imagen está generada por php, lo cual implica un proceso extra
saludos