Cómo potenciar la velocidad de su sitio con AJAX y JQuery

Pero antes de llegar a eso, debemos agregar una línea a nuestro CSS, no es necesario repasar todo el archivo CSS para este ejemplo, ya que todo es solo por apariencia, que cambiará con cualquier proyecto en el que esté trabajando. Sin embargo, con este primer método hay una línea que es esencial y es:

#page2, #page3, #page4 {
display: none;
}

Esto oculta todas las ‘páginas’ excepto la primera. Entonces, la página aparece normalmente en la primera carga.

El JavaScript

Entonces, ahora para explicar lo que necesitamos lograr a través de jQuery. En nuestro archivo custom.js, debemos orientarnos cuando el usuario hace clic en un enlace de navegación. Recupere su enlace href y busque la ‘sección’ con ese mismo ID, luego oculte todo en el div # main-content y desaparezca en la nueva sección. Esto es lo que parece:

$(function() {
    $('header nav a').click(function() {
        var $linkClicked = $(this).attr('href');
        document.location.hash = $linkClicked;
        if (!$(this).hasClass("active")) {
            $("header nav a").removeClass("active");
            $(this).addClass("active");
            $('#main-content section').hide();
            $($linkClicked).fadeIn();
            return false;
        }
        else {
            return false;
        }
    });
    var hash = window.location.hash;
    hash = hash.replace(/^#/, '');
    switch (hash) {
        case 'page2' :
            $("https://www.webdesignerdepot.com/2014/02/how-to-supercharge-your-sites-speed-with-ajax-and-jquery/#" + hash + "-link").trigger("click");
            break;
        case 'page3' :
            $("https://www.webdesignerdepot.com/2014/02/how-to-supercharge-your-sites-speed-with-ajax-and-jquery/#" + hash + "-link").trigger("click");
            break;
        case 'page4' :
            $("https://www.webdesignerdepot.com/2014/02/how-to-supercharge-your-sites-speed-with-ajax-and-jquery/#" + hash + "-link").trigger("click");
            break;
    }
});

Este código se divide en dos secciones, la primera logra lo que acabamos de hablar. Tiene una función de clic en los enlaces de navegación del encabezado. Luego coloca ‘# page1, # page2’, etc.en una variable llamada $ linkClicked. Luego, actualizamos la URL del navegador para que tenga el mismo nombre de hash. Luego tenemos una declaración if que asegura que el enlace en el que estamos haciendo clic no es la pestaña actual, si es así, no haga nada, pero si no, oculte todo el contenido actual y muestre el div con un ID de $ linkClicked. ¡Simple como eso!

La segunda sección verifica si la URL tiene un enlace hash al final, si lo tiene, encuentra un enlace correspondiente en la página con el mismo valor (es por eso que los enlaces tienen ID específicos en el marcado) y luego activa eso enlace (hace clic en él). Esto significa que el usuario puede volver a cargar una página después de haber navegado a una ‘página’ y la actualización enviará al usuario de regreso allí en lugar de volver a la primera página, lo que a menudo puede ser un problema con este tipo de sistema.

Así que ese es el final del primer método, esto da como resultado un sitio estático que funciona con intercambio instantáneo de contenido y sin recargas de página. El único inconveniente de este método es el hecho de que todo el contenido se llama en la carga inicial, ya que todo está en el archivo de índice. Esto puede comenzar a ser un problema con las fotos y el contenido adicional, lo que hace que la primera visita al sitio se cargue un poco más. Así que veamos otra forma de hacer este mismo efecto que puede eliminar ese problema.

Usando AJAX y PHP

Para lograr este mismo efecto pero de una manera ligeramente diferente, de modo que la carga inicial no vaya a cargar todo nuestro contenido y así ralentizarlo (anulando el punto si el sitio tiene mucho contenido) usaremos un poco PHP y AJAX. Esto significa que la estructura de archivos de nuestro proyecto cambiará y se verá así:

Entonces, si miras, el archivo de índice ahora es un .php y no un .html. También tenemos un archivo adicional llamado ‘load.php’, así como una nueva carpeta / directorio llamado páginas en el que hay cuatro páginas HTML. Ahora bien, esto significa que si está trabajando localmente, necesita configurar un entorno de desarrollo local usando algo como MAMP (para Mac) o Servidor WAMP (para ventanas). O puede cargar la carpeta completa en un servidor web si tiene acceso y editar allí, básicamente necesitará un entorno donde funcione PHP.

El index.php solo ha cambiado una cosa, pero es importante, ahora no cargaremos todo el contenido allí, y simplemente llamaremos al contenido inicial con una inclusión de PHP. Ahora se verá más o menos así:

<body>
<header>
    <h1>AJAX a Static Site</h1>
    <nav>
        <ul>
            <li><a href="https://www.webdesignerdepot.com/2014/02/how-to-supercharge-your-sites-speed-with-ajax-and-jquery/#page1" class="active" id="page1-link">Page 1</a></li>
            <li><a href="#page2" id="page2-link">Page 2</a></li>
            <li><a href="#page3" id="page3-link">Page 3</a></li>
            <li><a href="#page4" id="page4-link">Page 4</a></li>
        </ul>
    </nav>
</header>
<div id="main-content">
<?php include('pages/page1.html'); ?>
</div> <!-- end #main-content -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="custom.js"></script>
</body>

Entonces la línea comienza está llamando al primer archivo HTML de nuestra carpeta de páginas e insertándolo por completo en nuestro DIV # main-content. El archivo llamado puede contener cualquier contenido que desee que aparezca en la página.

$(function() {
    $('header nav a').click(function() {
        var $linkClicked = $(this).attr('href');
        document.location.hash = $linkClicked;
        var $pageRoot = $linkClicked.replace('#page', '');
        if (!$(this).hasClass("active")) {
            $("header nav a").removeClass("active");
            $(this).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();
                }
            }
        });
    }
    else {
        event.preventDefault();
    }
});

<?php
if(!$_POST['page']) die("0");
$page = (int)$_POST['page'];
if(file_exists('pages/page'.$page.'.html'))
echo file_get_contents('pages/page'.$page.'.html');
else echo 'There is no such page!';
?>