Visualización de un GIF durante la carga de IFRAME usando Vanilla JavaScript
Cuando navegamos por la web, la paciencia se convierte en una virtud, especialmente al lidiar con contenido que tarda en cargar. Imagina que, en lugar de enfrentarte a una pantalla en blanco mientras esperas un IFRAME, puedes sorprender a tus usuarios con una animación cautivadora. En este artículo, te mostraremos cómo implementar un GIF que se visualizará de manera elegante durante la carga de un IFRAME, utilizando solo Vanilla JavaScript. Aprende a mejorar la experiencia de usuario y a mantener la atención, mientras el contenido se prepara para ser presentado. ¡Comencemos!
Si te has encontrado ante la necesidad de optimizar la carga de tu sitio web, seguramente hayas considerado la posibilidad de utilizar IFRAMEs para cargar contenido que no sea esencial. Sin embargo, cuando se trata de IFRAMEs, la transición de carga puede ser muy abrupta para los usuarios. Es aquí donde entra en juego la técnica de Visualización de un GIF durante la carga de IFRAME usando Vanilla JavaScript. ¡Acompáñanos en este artículo para aprender cómo mejorar la experiencia de los usuarios al utilizar IFRAMEs!
Si estás incluyendo iframe elementos en sus páginas HTML, es posible que desee considerar mostrar un simple cargando indicador para que sus usuarios finales sepan que el contenido se está cargando dentro del iframe en lugar de simplemente mostrar un espacio vacío.
Hay muchas formas de lograr esto. En este tutorial, vamos a ver una de las formas de hacer esto usando vainilla JavaScript. Este tutorial simplemente cubre cómo mostrar una imagen animada mientras se carga el iframe contenido.
Manifestación
En el siguiente código, hemos incluido HTML, CSS y JavaScript en la misma página. Por supuesto, en la práctica, separaríamos el CSS en su propia hoja de estilo y moveríamos el JavaScript a su propio archivo externo. En el ejemplo a continuación, todo lo que estamos haciendo es mostrando inmediatamente el GIF animado en medio de la iframe elemento.
Una vez el iframe el contenido completa las cargas, el hideLoader() La función se ejecuta a través de la onload evento en el iframe elemento. La función de JavaScript simplemente cambia la propiedad de estilo de visualización del GIF animado a none que esencialmente oculta la imagen.
<!DOCTYPE html>
<html>
<head>
<title>JavaScript Demo – IFRAME Loader</title>
<style>
#frameWrap {
position:relative;
height: 360px;
width: 640px;
border: 1px solid #777777;
background:#f0f0f0;
box-shadow:0px 0px 10px #777777;
}
#iframe1 {
height: 360px;
width: 640px;
margin:0;
padding:0;
border:0;
}
#loader1 {
position:absolute;
left:40%;
top:35%;
border-radius:20px;
padding:25px;
border:1px solid #777777;
background:#ffffff;
box-shadow:0px 0px 10px #777777;
}
</style>
<script>
function hideLoader() {
document.getElementById(‘loader1’).style.display = «none»;
}
</script>
</head>
<body>
<div id=»frameWrap»>
<img id=»loader1″ src=»https://www.itgeared.com/display-gif-loading-iframe-javascript/loading.gif» alt=»loading gif» />
<iframe id=»iframe1″ src=»targetPage.html» onload=»hideLoader();»></iframe>
</div>
</body>
</html>
Visualización de un GIF durante la carga de IFRAME usando Vanilla JavaScript
Cuando navegamos por la web, la paciencia se convierte en una virtud, especialmente al lidiar con contenido que tarda en cargar. Imagina que, en lugar de enfrentarte a una pantalla en blanco mientras esperas un IFRAME, puedes sorprender a tus usuarios con una animación cautivadora.
En este artículo, te mostraremos cómo implementar un GIF que se visualizará de manera elegante durante la carga de un IFRAME, utilizando solo Vanilla JavaScript. Aprende a mejorar la experiencia de usuario y a mantener la atención, mientras el contenido se prepara para ser presentado. ¡Comencemos!
¿Por qué usar un GIF de carga?
Si te has encontrado ante la necesidad de optimizar la carga de tu sitio web, seguramente hayas considerado la posibilidad de utilizar IFRAMEs para cargar contenido que no es esencial. Sin embargo, cuando se trata de IFRAMEs, la transición de carga puede ser muy abrupta para los usuarios. Esto puede resultar en una experiencia de usuario poco satisfactoria.
Implementando el GIF de carga
La técnica para mostrar un GIF durante la carga de un IFRAME es bastante sencilla. A continuación, te presentamos un ejemplo práctico utilizando Vanilla JavaScript.
Código HTML
<div id="loader" style="display: none;">
<img src="ruta/del/tu/loader.gif" alt="Cargando...">
</div>
<iframe id="myIframe" src="tu_contenido.html" width="600" height="400"></iframe>
Código JavaScript
// Mostrar el GIF al cargar el iframe
var iframe = document.getElementById('myIframe');
var loader = document.getElementById('loader');
iframe.onload = function() {
loader.style.display = 'none'; // Ocultar el GIF al completar la carga
};
iframe.src = 'tu_contenido.html'; // Cambiar esta línea con tu URL
loader.style.display = 'block'; // Mostrar el GIF
Conclusiones
Implementar un GIF de carga durante la carga de IFRAMEs puede mejorar significativamente la experiencia del usuario en tu sitio. Ayuda a mantener la atención mientras el contenido se está preparando, evitando que se sienta frustrado al ver una pantalla en blanco. Asegúrate de elegir un GIF que sea ligero y relevante para tu página.
Preguntas Frecuentes (FAQs)
¿Qué es un IFRAME y para qué se utiliza?
Un IFRAME (Inline Frame) es un elemento HTML que permite incrustar contenido de otra página web dentro de la actual. Se utiliza comúnmente para mostrar contenido externo, como videos, formularios o aplicaciones web.
¿Cómo puedo optimizar la carga de un IFRAME?
Para optimizar la carga de un IFRAME, puedes cargar contenido de forma asíncrona y mostrar un GIF de carga mientras se espera que el contenido se cargue. Además, asegúrate de que el contenido dentro del IFRAME esté optimizado, usando imágenes de tamaño adecuado y evitando archivos pesados.
¿Dónde puedo encontrar GIFs para usar como cargadores?
Puedes encontrar GIFs gratuitos en varias plataformas en línea como Giphy o Tenor. Asegúrate de verificar los derechos de uso asociados con cada GIF.
Referencias
Para más información sobre AJAX y cómo mejorar la experiencia de carga en tu web, consulta este tutorial [[1]].
¡Qué interesante! La verdad es que nunca había pensado en usar un GIF para mejorar la experiencia de carga en un IFRAME. Cuando trabajé en un proyecto similar, opté por una simple animación CSS, pero ahora me doy cuenta de que un GIF podría haberle dado un toque más divertido. Definitivamente voy a probar esta técnica, gracias por compartirla.
Jugo: ¡Totalmente de acuerdo, Suhail! A mí me pasó algo similar en un proyecto que hice, usé un logo girando como carga, pero un GIF divertido le hubiera dado un plus. Me encanta la idea de usar algo más visual y dinámico, seguro que la experiencia del usuario mejora un montón. ¡Voy a poner esto en práctica de inmediato!
Ian carlo: ¡Exacto, Jugo y Suhail! Yo también solía usar simplemente una barra de progreso, pero una vez decidí poner un GIF de un gato intentando atrapar un puntero y, la verdad, ¡fue un éxito total! La gente se quedó pegada mirando el GIF y se olvidó por completo de que estaban esperando. Desde entonces, siempre busco maneras de hacer la carga más entretenida. ¡Gracias por la inspiración, aplicaré más GIFs en mis proyectos!