Cómo aumentar la velocidad de su sitio con AJAX y jQuery.
En este tutorial, exploraremos cómo acelerar la usabilidad en pequeños sitios estáticos con algunos métodos diferentes (una página estática es aquella que no tiene contenido renovado, por lo que no hay entradas en blogs o flujos de fotos, etc.)
.
La forma en que vamos a hacer esto es quitando las recargas de la página. En pocas palabras, si el usuario utiliza algunos enlaces de navegación, sólo cambia el contenido principal de la página y el navegador no recarga la página.
Consigamos este efecto de dos maneras diferentes, la primera usa sólo jQuery, la otra usa AJAX y algo de PHP. Ambos tienen sus ventajas y desventajas, que también analizaremos. Eche un vistazo a la demostración para ver lo que queremos conseguir, y empecemos con el primer (y más simple) método jQuery.
Primero nos fijamos en la configuración del sitio. HTML es muy simple, pero tiene algunas partes importantes,lo esencial” por así decirlo. Necesitamos algunos enlaces de navegación que tengan un cierto hash href (que explicaremos en un minuto) y un cierto área de contenido que usted tendría en cualquier otra página de todos modos. Primero veamos qué hay en nuestro archivo index.html:
Entonces, para resumir las partes importantes de lo que tiene que ir a marcar: Tenemos nuestra navegación donde cada enlace tiene un href de la DIV correspondiente. Así, el enlace a lapágina 2″” tiene uno (este es el ID del elemento de abajo). Así que, con este primer método, como puedes ver, tenemos una división de #contenido principal alrededor de nuestras secciones, y luego cada contenido de la página sucesivamente en su propio elemento ‘sección’ por separado. También llamamos jQuery y nuestro propio archivo Javascript custom.js donde se crea la funcionalidad real del sitio.
Pero antes de llegar allí, tenemos que añadir una línea a nuestro CSS, no hay razón para ir a través de todo el archivo CSS para este ejemplo, ya que es sólo un aspecto que cambiará con cada proyecto en el que trabajamos. Con este primer método, sin embargo, hay una línea que es esencial y es la siguiente:
Esto oculta todas las páginas excepto la primera. Así, la página aparece normal en la primera carga.
JavaScript
Así que ahora para explicar lo que necesitamos lograr con jQuery. En nuestro archivo custom.js tenemos que apuntar cuando el usuario hace clic en un enlace de navegación. Toma el enlace href y encuentra los ‘Section’ con el mismo ID, luego oculta todo en el div #main-content y desaparece en la nueva sección. Esto es lo que parece:
Este código está dividido en dos secciones, la primera de las cuales logra lo que acabamos de mencionar. Tiene una función para hacer clic en los enlaces navales en el header. A continuación, define los ‘#página1, #página2’ etc. en una variable llamada $linkClick. A continuación, actualizamos la URL del navegador para obtener el mismo nombre de hash. Entonces tenemos una sentencia if que asegura que el enlace en el que hacemos clic no es la pestaña actual si no hace nada, sino si no oculta todo el contenido actual y muestra el div con un ID de $linkClick. Es así de simple!
La segunda sección comprueba si la URL tiene un enlace hash al final, si es así, encuentra un enlace correspondiente en la página con el mismo valor (por lo que los enlaces en la etiqueta tienen ciertos IDs) y luego activa ese enlace (hace clic sobre él). Lo que esto hace es que el usuario puede recargar una página después de navegar a unapágina”, y la actualización envía al usuario de vuelta allí en lugar de simplemente volver a la primera página, lo que a menudo puede ser un problema con este tipo de sistema.
Por lo tanto, este es el final del primer método, esto conduce a un sitio web funcional estático que intercambia contenido instantáneamente y no recarga páginas. La única desventaja de este método es el hecho de que todo el contenido se llama en la carga inicial porque está presente en el archivo de índice. Esto puede conducir a un problema con las fotos y el contenido adicional, lo que puede hacer que la primera visita al sitio tarde un poco más. Así que busquemos otra manera de lograr el mismo efecto que puede eliminar este problema.
Usando AJAX y PHP
Para conseguir este mismo efecto, pero de una forma ligeramente diferente, para que la carga inicial no cargue todo nuestro contenido y lo ralentice (lo que destruye el punto si el sitio tiene mucho contenido), usemos un poco de PHP y AJAX. Esto significa que la estructura de archivos de nuestro proyecto cambiará y permanecerá así:
Así que si miras, el archivo de índice es ahora un.php y ya no un.html. También tenemos un archivo adicional llamado ‘load.php’ y una nueva carpeta/directorio llamado páginas, que contiene cuatro páginas HTML. Esto significa que si está trabajando localmente, necesitará configurar un entorno de desarrollo local con algo como MAMP (para Mac) o WAMP Server (para Windows). O puede subir toda la carpeta a un servidor web, si tiene acceso allí y editarla, básicamente necesita un entorno en el que funcione PHP.
El index.php sólo cambió una cosa, pero es importante, no carguemos todo el contenido allí y llamemos al contenido original con un include PHP. Se verá así ahora:
Luego el comienzo de la línea llama al primer archivo HTML en nuestra carpeta de página y lo inserta completamente en nuestro DIV #main-content. El archivo llamado puede contener cualquier contenido que deba aparecer en la página.
Usando $.ajax en JavaScript
Vamos al nuevo Javascript, ahora se ve un poco diferente, principalmente usamos AJAX ahora para obtener el nuevo contenido de cada archivo HTML cuando el usuario hace clic en una navegación correspondiente. Aquí está la primera función del código (la segunda sigue siendo la misma que antes):
$(function() {$(‘header nav a’).click(function() {var $linkClick = $(this).attr(‘href’);document.location.hash = $linkClick;var $pageRoot = $linkClick.replace(‘#page’, ”);if(!$(esto).hasClass(“active”)) {$(“header nav a”).removeClass(“active”);$(esto).addClass(“active”);$.ajax({type: POST”, url: load.php”, Data: page=’+$pageRoot,dataType:html”,success: function(msg){if(parseInt(msg)))!=0){$(‘#main-content’).html(msg);$(‘#main-content section’).hide().fadeIn();}}}}}}}}}}}}}}}} si {event.preventDefault();
);
);
)
Vamos a explicar lo que está pasando. Hemos añadido otra variable, $pageRoot. Este es básicamente el número en el que se ha hecho clic (donde la parte de ‘#Page’ del enlace hash va por el camino y mantiene el número individual). Así, dentro de la misma declaraciónif” que antes, llamamos a ajax y usamos el otro archivo PHP que mencionamos anteriormente para analizar la información dada (en qué enlace se hizo clic) y encontrar la página correspondiente. Cuando vuelve sin errores, insertamos el nuevo HTML del archivo recibido en nuestro #main-content DIV. Luego, para evitar que cambie repentinamente, lo ocultamos todo y luego lo desvanecemos.
load.php
El contenido del nuevo archivo PHP es conciso, toma el número de página enviado por jQuery y busca la existencia del archivo HTML correspondiente. Si lo hace, obtiene todo el contenido y lo devuelve a la función AJAX (la cual mostramos anteriormente que estamos insertando este contenido en el DIV principal).
>>>>
Después de eso, la página debe tener el aspecto que usted desee, pero la mayoría de las veces debe funcionar correctamente.
¡Eso es lo que es! La página ahora llama al archivo HTML correspondiente cada vez que el usuario hace clic en un enlace de navegación. Intercambia contenido sin recargar la página. Y así aún no tiene que llamar a todo el contenido de la página principal! Espero que hayas aprendido un método útil de este tutorial y que puedas usarlo para mejorar un proyecto de alguna manera.
Puede ver la demo de jQuery aquí, la demo de PHP aquí, o descargar el código fuente y echar un vistazo.
¿Usaste AJAX para cargar el contenido? ¿Utilizó una técnica similar para acelerar su sitio? Díganos lo que Footernsa de los comentarios que aparecen a continuación.
Imagen/imagen en miniatura seleccionada, imagen sobrecargada a través de Shutterstock.