Como aumentar el tiempo de carga de nuestras web – los iframe
Articulo tomado de mi blog
Como aumentar el tiempo de carga de nuestras web – los iframe
-------------------------
El tiempo de carga de nuestros sitios web es un tema complejo, abordarlo completamente fácilmente podría ser tema de un solo blog… y no hablemos de las diferencias entre hacerlo con plataformas .Net o LAMP o lo que sea. Es un tema largo.
Así que siempre hay que abordarlo desde lo más grande hasta lo más pequeño. En la web moderna es frecuente encontrarse con iframes puesto que la integración con diversos servicios como redes sociales, mapas y demas gadgets suele hacerse por medio del tag <iframe> , lo cual en resumen es un marco que despliega contenidos alojados en otra web.
El problema con los iframes es que funcionan de manera síncrina, es decir nuestra web esta cargando normalmente, encuentra un iframe y comienza a cargarlo, solo cuando el iframe es cargado por completo continua la carga de los demas elementos de nuestra web.
Lo ideal entonces es hacer que la carga de éstos iframe sea asincónica o bien dilatarla para que inicien su carga solo cuando todo nuestro sitio haya sido desplegado, esto lo podemos hacer manipulando alguno de los eventos de carga de la pagina y luego escribiendo los tag del iframe dinámicamente.
Este es un código de prueba de un iframe
Para cargarlo dinamicamente lo primero que haremos es envolverlo dentro de un nuevo div al cual llamaremos “#map-container”
|
1
2
3
|
<div id="map-container">
</div>
|
Ahora haremos la parte del evento de carga de la página, a mi me gusta hacerlo con JQuery, pero ya sabes que puedes hacerlo con lo que desees. Colocamos el código dentro del evento ready de JQuery. El código es como sigue:
|
1
2
3
4
5
6
|
$(window).load(
function()
{
$("#map-container").html();
}
);
|
Así que ahora tomamos todo el contenido del tag <iframe> y lo enviamos como parámetro:
|
1
2
3
4
5
6
7
|
$(window).load(
function()
{
var iframeString ='<iframe id="Iframe2" name="gmap" width="100%" height="400" src="http://www.otraweb.com"></iframe>'; $("#map-container").html(iframeString);
}
);
|
Y eso es todo, en adelante el tiempo de carga de tu página es independiente del tiempo de carga de los iframe 
.