Cómo acelerar la carga de imágenes en tu sitio web con pre-carga
Tener imágenes de alta resolución puede mejorar considerablemente un sitio web. Sin embargo, también pueden ralentizarlo: las imágenes son archivos que consumen ancho de banda y están directamente relacionadas con los tiempos de espera. Es hora de que te eduques sobre cómo acelerar las cosas con un pequeño truco llamado preloading de imágenes.
¿Qué es el preloading de imágenes?
Normalmente, un navegador carga las imágenes solo después de que se envía una solicitud HTTP para ellas, ya sea de forma pasiva a través de una etiqueta <img> o activamente mediante una llamada a un método. Por lo tanto, si tienes un JavaScript que cambia una imagen al pasar el ratón por encima o que cambia una imagen automáticamente después de un tiempo, es probable que debas esperar desde unos segundos hasta unos minutos mientras se recupera la imagen del servidor. Esto es especialmente notable si tienes una conexión lenta a Internet o si las imágenes que se recuperan son muy grandes, y el retraso generalmente arruina el efecto que esperabas.
Algunos navegadores intentan mitigar este problema almacenando las imágenes en la caché local para que las llamadas posteriores a la imagen se satisfagan de inmediato... pero aún hay un retraso la primera vez que se necesita la imagen. El preloading es una técnica en la que la imagen se descarga en la caché antes de que se necesite. De esta manera, cuando la imagen esté realmente necesitada, se puede recuperar de la caché y mostrarse de inmediato.
El objeto Image()
La forma más sencilla de hacer preloading de una imagen es instanciar un nuevo objeto Image() en JavaScript y pasarle la URL de la imagen que deseas precargar. Digamos que tienes una imagen llamada heavyimagefile.jpg que deseas mostrar cuando el usuario pasa el ratón por encima de otra imagen que ya se muestra. Para precargar esta imagen y lograr un tiempo de respuesta más rápido, simplemente crea un nuevo objeto Image() llamado heavyImage y cárgalo simultáneamente en la página con el controlador de eventos onLoad():
<html>
<head>
<script language = "JavaScript">
function preloader()
{
heavyImage = new Image();
heavyImage.src = "heavyimagefile.jpg";
}
</script>
</head>
<body onLoad="javascript:preloader()">
<a href="#" onMouseOver="javascript:document.img01.src='heavyimagefile.jpg'">
<img name="img01" src="justanotherfile.jpg"></a>
</body>
</html>Observe que la etiqueta de imagen por sí misma no maneja los eventos onMouseOver() y onMouseOut(), por eso la etiqueta <img> en el ejemplo anterior ha sido incluida dentro de una etiqueta <a> que sí incluye soporte para esos tipos de eventos.
Cargar múltiples imágenes con arrays
En la práctica, es probable que necesites precargar más de una imagen, por ejemplo, en una barra de menú que contiene múltiples cambios de imagen al pasar el ratón por encima o si intentas crear un efecto de animación suave. Esto no es difícil; lo único que debes hacer es utilizar arrays de JavaScript, como en el siguiente ejemplo:
Sun anuncia que Java será de código abierto en el futuro próximo<script language="JavaScript">
function preloader()
{
// contador
var i = 0;
// crear el objeto
imageObj = new Image();
// establecer la lista de imágenes
images = new Array();
images[0]="image1.jpg"
images[1]="image2.jpg"
images[2]="image3.jpg"
images[3]="image4.jpg"
// comenzar el preloading
for(i=0; i<=3; i++)
{
imageObj.src=images[i];
}
}
</script>
En el ejemplo anterior, defines una variable i y un objeto Image() con el nombre ingenioso de imageObj. Luego defines un nuevo array llamado images[], donde cada elemento del array almacena la fuente de la imagen que se pre-cargará. Finalmente, creas un bucle for() para recorrer el array y asignar cada imagen al objeto Image(), precargándola en la caché.
El controlador de eventos onLoad()
Al igual que muchos otros objetos en JavaScript, el objeto Image() también cuenta con algunos controladores de eventos. El más útil de todos es, sin duda, el controlador onLoad(), que se invoca cuando la imagen ha terminado de cargarse. Este controlador se puede vincular a una función personalizada para realizar tareas específicas una vez que la imagen ha finalizado de cargarse. El siguiente ejemplo ilustra esto mostrando una pantalla de "espere, por favor" mientras se carga la imagen y luego redireccionando el navegador a una nueva URL una vez que se ha terminado de cargar la imagen:
<html>
<head>
<script language="JavaScript">
// crear un objeto de imagen
objImage = new Image();
// establecer lo que sucede una vez que se carga la imagen objImage.onLoad=imagesLoaded();
// precargar el archivo de imagen
objImage.src='images/image1n.gif';
// función invocada en la carga de la imagen
function imagesLoaded()
{
document.location.href='index2.html';
}
</script>
</head>
<body>
Por favor, espera, cargando imágenes...
</body>
</html>Por supuesto, también puedes crear un array de imágenes y recorrerlo, precargando cada una y llevando un seguimiento del número de imágenes cargadas en cada etapa. Una vez que todas las imágenes se han cargado, el controlador de eventos puede programarse para llevar el navegador a la siguiente página (u realizar cualquier otra tarea).
Preloading y menús con múltiples estados
Ahora, ¿qué tal si usamos toda la teoría que acabas de aprender en una aplicación real? El siguiente código es una pequeña pieza de código que escribí recientemente: una barra de menú con botones (enlaces de imagen), cada uno de los cuales puede estar en uno de tres estados: normal, hover y click. Dado que los botones tienen múltiples estados, es necesario utilizar el preloading de imágenes para asegurarse de que el menú responda rápidamente a los cambios en su estado. El código en El listado A ilustra esto.
El código HTML en el Listado A configura una barra de menús que consta de cuatro botones, cada uno de los cuales tiene tres estados: normal, hover y click. Los requisitos son los siguientes:
- Cuando el ratón se mueve sobre un botón en el estado normal, cambia al estado hover. Al salir el ratón, vuelve al estado normal.
- Al hacer clic en un botón, cambia a su estado de click. Permanece en este estado hasta que se hace clic en otro botón.
- Si se hace clic en un botón, ningún otro botón puede estar en estado de click. Los otros botones solo pueden estar en sus estados hover o normal.
- Solo un botón puede hacer clic a la vez.
- Solo se puede mover el ratón sobre un botón a la vez.
La primera tarea es configurar arrays que contengan las imágenes para cada estado del menú. Los elementos <img> correspondientes a estos elementos del array también se crean en el cuerpo del documento HTML y se nombran de forma secuencial. Observa que los valores del array se indexan a partir de 0, mientras que los elementos <img> correspondientes se nombran a partir de 1, lo que da lugar a ciertos ajustes de cálculo en la segunda mitad del script.
Consejos para desarrolladores de aplicaciones móvilesLa función preloadImages() se encarga de cargar todas las imágenes en la caché, para que el tiempo de respuesta al mover el ratón sea mínimo. Se utiliza un bucle for() para iterar sobre las imágenes creadas en el primer paso y precargar cada una.
La función resetAll() es una forma conveniente de restablecer todas las imágenes a su estado normal. Esto es necesario porque, cuando se hace clic en un elemento del menú, todos los demás elementos del menú deben volver a su estado normal antes de que el elemento del menú en clic pueda cambiar a su estado de click.
Las funciones setNormal(), setHover() y setClick() se encargan de cambiar la fuente de una imagen en particular (número de imagen pasado como argumento de la función) a su estado normal, hover o click, respectivamente. Dado que las imágenes que se hacen clic deben permanecer en ese estado hasta que se hace clic en otra imagen (ver regla n.º 2), están temporalmente inmunes a los movimientos del ratón; por lo tanto, las funciones setNormal() y setHover() incluyen código para cambiar el estado de un botón solo si no está en su estado de click.
Lo anterior es solo una de las muchas formas en que el preloading puede ayudarte a acelerar el tiempo de respuesta de tus efectos de JavaScript. Utiliza las técnicas descritas anteriormente en tu sitio y adáptalas según sea necesario para satisfacer tus requisitos. ¡Buena suerte!
Cómo manejar múltiples botones de envío en un formulario con PHPEn Newsmatic nos especializamos en tecnología de vanguardia, contamos con los artículos mas novedosos sobre Desarrollo, allí encontraras muchos artículos similares a Cómo acelerar la carga de imágenes en tu sitio web con pre-carga , tenemos lo ultimo en tecnología 2023.
Artículos Relacionados