Post original en JASoft.org: http://www.jasoft.org/Blog/post/Evitar-parpadeo-de-color-blanco-mientras-carga-un-marco-interno-en-una-pagina-HTML.aspx
Hoy 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.aspx” style=”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!
Si vas a compartir este post: por favor utiliza la URL original en JASoft: http://www.jasoft.org/Blog/post/Evitar-parpadeo-de-color-blanco-mientras-carga-un-marco-interno-en-una-pagina-HTML.aspx