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>Error 403 The request cannot be completed because you have exceeded your quota. : quotaExceeded
