JASoft.org

El blog de José Manuel Alarcón Aguín. Programación web y mucho más...

MENÚ - JASoft: JM Alarcón

Evitar parpadeo de color blanco mientras carga un marco interno en una página HTML

ParpapdeoHoy un truco rápido pero interesante.

Si tienes una página HTML en la que debes incluir un marco interno que muestra recursos de otras páginas lo normal es que simplemente insertes el iframe y punto. Por ejemplo

<iframe src=“/modulo/OtraPagina.aspxstyle=”width:100%;height:30px;”>

Lo malo de hacer esto es que el contenido del marco lógicamente comienza a cargar más tarde que el de la propia página, y por regla general observamos durante una fracción de segundo (o puede que más si la carga es lenta) un espacio en blanco en donde va a estar situado el nuevo contenido. Si el fondo de la página principal no es blanco se notará un montón y producirá una especie de “parpadeo” que se notará, puede resultar molesto y además queda poco profesional.

Un primer intento que podemos hacer para solucionarlo es cambiar el color del fondo del marco para que coincida con el fondo de la página. Pero no funcionará porque lo que tenemos dentro del marco es un nuevo documento HTML que por defecto tiene el fondo blanco.

¿Alguna solución mejor?

Una opción mejor es combinar la carga del contenido con un evento que señala el fin de ésta. La idea es sencilla y también es muy fácil de implementar.

Lo que se hace es hacer que el iframe esté oculto, detectamos cuándo ha terminado de cargar el contenido, y lo mostramos mediante JavaScript. La forma de implementarla es súper-sencilla ya que basta con incluir un estilo “inline” y un atributo con una línea de JavaScript, así:

<iframe src="/Modulo/OtraPagina.aspx" style="visibility:hidden;" onload="this.style.visibility='visible';">

De este modo el iframe permanece oculto hasta que acaba de cargar y evitamos por completo el molesto parpadeo.

El único problema de usar esta técnica es que si algún usuario no tiene JavaScript habilitado (raro, raro, pero ocurre) no verá el iframe nunca. Sinceramente creo que podemos arriesgarnos ;-)

¡Espero que te sea útil!

José Manuel Alarcón José Manuel Alarcón
Fundador de campusMVP.es, el proyecto de referencia en formación on-line para programadores en lengua española. Autor de varios libros y cientos de artículos. Galardonado como MVP de Microsoft desde 2004. Gallego de Vigo, amante de la ciencia y la tecnología, la música y la lectura. Ayudando a la gente en Internet desde 1996.
Descarga GRATIS mi último libro (no técnico): "Tres Monos, Diez Minutos".
Banner

Comentarios (7) -

Spain Rene Pacios

Muy buen tip Jose Manuel.

Al verlo se me ocurre que para resolver el tema de los usuarios que tengan JavaScript deshabilitado, tal vez se podría solucionar poniendo algún tipo de fallback con las etiquetas noscript. Algo así:

<iframe src="/Modulo/OtraPagina.aspx" style="visibility:hidden;" onload="this.style.visibility='visible';">

<noscript>
    <iframe src="/Modulo/OtraPagina.aspx">
</noscript>

Aunque con esta solución también creo que los usuarios que no tuviesen js habilitado, (dependiendo de la cache del navegador que usen) podrían hacer dos peticiones a la página contenida en el iframe, pero bueno como tu bien dices, es una minoría de los internautas los que deshabilitan JavaScript.

Saludos

Responder

Spain José Manuel Alarcón

Gracias por el comentario.

Saludos.

Responder

Buenos días,

al leer tu código me surgen dos dudas:

1. ¿no sería mejor usar display:none antes que visibility:hidden? Hay diferencias entre usar una y otra www.w3schools.com/css/css_display_visibility.asp
2. desde el punto de vista de la accesibilidad, ¿no sería mejorable el modo en el que se declara, y dispara, el evento? Para muestra un botón (que seguro también es mejorable :-) ):
<iframe id="frmOtro" src="/Modulo/OtraPagina.aspx" style="display:none;">
<script>
document.getElementById("frmOtro").addEventListener("load", function(){document.getElementById("frmOtro").style.display="block"}, false);
</script>

Con todo, gracias por el apunte :-)

Responder

Spain José Manuel Alarcón

Hola Jorge,

No creo que sea recomendable usar display:none. el motivo es que eso hará que el hueco ocupado por el iframe desaparezca y dependiendo de tu diseño puede trastocar todo. Con visibility:hidden el iframe no se ve pero ocupa su lugar igualmente y no se descuadra nada.

Respecto a lo otro: no veo cómo puede afectar la accesibilidad el uso del evento onload. Supongo que te refieres a mejorar la gestión del evento para poder usar varios manejadores. Si necesitas usar varios manejadores para el evento, entonces es mejor usar addEventListener aunque en ese caso lo mejor sería usar un método genérico que soporte todos los navegadores, ya que este método no está soportado en los navegadores más antiguos. En mi libro de JavaScript creo un gestor genérico de eventos que funciona correctamente en todos los navegadores, incluso en los más antiguos.

En cualquier caso no es muy normal que gestiones el evento onload de un iframe desde la página que lo alberga, sino desde la página que se carga, por lo que no creo que usar esa declaración del manejador (mediante un atributo) vaya a afectar en absoluto a ningún código de script que tengas en la página "madre".

Espero que te lo aclare.

Saludos.

Responder

buena explicación :-)

Sobre el uso de display o visibility tienes razón, depende del diseño que tengas entre manos. Sobre lo del evento, quizás mejor hubiera tenido que decir que quizás los validadores automáticos de código te den un warning al ver el atributo onload en algún elemento HTML (la verdad, no lo he probado). De lo que dices que no es muy normal sobre gestionar el evento load del iframe en la página que lo alberga, ¿por qué lo dices? ¿què desventajas le ves o que ventajas ves en hacerlo en el propio documento cargado?

Ciao

Responder

Spain José Manuel Alarcón

Hola,

No es que le vea desventajas o ventajas: es que son conceptos diferentes. Normalmente el evento load del iframe lo gestionas para hacer algo en la página padre donde está albergado una vez que éste cargue. El evento load de la página que muestras en el iframe normalmente será para hacer algo en la propia página "hija". Aunque ambos se lancen al mismo tiempo (porque ha cargado la página) conceptualmente su uso es muy diferente. O al menos yo lo veo así....

Responder

Interesante tip Jose se agradece siempre dando en el b lanco! muchos éxitos (Y)

Responder

Agregar comentario