¿Alguna vez has visitado una página web que parece tardar demasiado en cargar? Es una experiencia frustrante y poco satisfactoria para el usuario. En este artículo, te mostraremos cómo mejorar la experiencia de carga de una página web utilizando GIF animados. En particular, aprenderás cómo mostrar un GIF durante la carga de IFRAME usando jQuery. ¡Sigue leyendo para descubrir cómo puedes optimizar tu sitio web y brindar la mejor experiencia posible a tus visitantes!
Si estás incluyendo iframe elementos en sus páginas HTML, es posible que desee considerar mostrar un indicador simple de “carga” para que sus usuarios finales sepan que el contenido se está cargando. cargado dentro de iframe en lugar de simplemente mostrar
espacio vacio.
Hay muchas formas de lograr esto. En este tutorial, vamos a ver una de las formas de hacer esto usando jQuery. Este tutorial simplemente cubre cómo mostrar una imagen animada mientras se carga el iframe contenido.
Ejemplo
En el siguiente código hemos incluido el HTML, CSSy JavaScript/jQuery 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 código JavaScript/jQuery a su propio archivo externo.
En el siguiente ejemplo, todo lo que estamos haciendo es mostrar 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 del evento onload en el iframe elemento. El JavaScript Luego, la función simplemente cambia la propiedad de estilo de visualización para el GIF animado a “ninguno”, lo que esencialmente oculta la imagen.
<!DOCTYPE html>
<html>
<head>
<title>jQuery 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 type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
</head>
<body>
<div id="frameWrap">
<img id="loader1" src="loading.gif" width="36" height="36" alt="loading gif"/>
<iframe id="iframe1" src="targetPage.html" ></iframe>
</div>
<script>
$(document).ready(function () {
$('#iframe1').on('load', function () {
$('#loader1').hide();
});
});
</script>
</body>
</html>