Interaktives Design

So können Sie die Geschwindigkeit Ihrer Website mit AJAX und JQuery steigern

In diesem Tutorial werden wir uns ansehen, wie man die Benutzererfahrung auf kleinen statischen Sites mit ein paar verschiedenen Methoden beschleunigt. (Eine statische Seite hat keine erneuerten Inhalte, also keine Blog-Posts oder Fotostreams etc.)

Die Art und Weise, wie wir das tun werden, besteht darin, Seiten neu zu laden. Einfach gesagt, wenn der Benutzer Navigationslinks verwendet, ändert sich nur der Hauptinhalt der Seite und der Browser lädt die Seite nicht neu.

Wir werden diesen Effekt auf zwei verschiedene Arten erreichen, der erste nutzt nur jQuery und der andere nutzt AJAX und etwas PHP. Sie haben beide ihre Vor- und Nachteile, die wir uns auch anschauen werden. Sieh dir das an die Demo um zu sehen, was wir erreichen wollen, und beginnen wir mit der ersten (und einfacheren) jQuery-Methode.

Erreichen Sie den Effekt mit jQuery

Zuerst schauen wir uns das Setup für die Seite an. Das HTML ist sehr einfach, hat aber ein paar wichtige Teile, "das Wesentliche" sozusagen. Wir benötigen einige Navigationslinks, die einen spezifischen Hash-href haben (den wir Ihnen gleich erklären werden) und einen bestimmten Inhaltsbereich, den Sie ohnehin auf jeder anderen Seite haben. Sehen wir uns zunächst an, was sich in unserer index.html-Datei befindet: 

Speed Up Static Sites with jQuery
  Erster Seitentitel 
  Inhalt der ersten Seite 
  Schau, keine Seiten laden! 
  Zweiter Seiteninhalt. 
  Ooh verblassen! 
  Dritter Seiteninhalt. 
  Vierter Seitentitel 
  Vierter Seiteninhalt.

Also, um die wichtigen Teile dessen, was in das Markup gehen muss, zu rekapitulieren: Wir haben unsere Navigation, in der jeder Link eine href des entsprechenden DIV hat. So hat der Link zu "Seite 2" eine href = "# page2" (was die ID der

Element weiter unten). Mit dieser ersten Methode, wie Sie sehen können, haben wir einen div von # Hauptinhalt, der unsere Sektionen umgibt, und dann jede Seite Inhalt nacheinander in ihrem eigenen separaten 'section' Element. Wir rufen auch jQuery und unsere eigene custom.js Javascript-Datei auf, in der die tatsächliche Funktionalität der Site erstellt wird.

Aber bevor wir dazu kommen, müssen wir eine Zeile zu unserem CSS hinzufügen, es gibt keine Notwendigkeit, die gesamte CSS-Datei für dieses Beispiel zu durchsuchen, da es nur für Looks ist, die sich mit jedem Projekt ändern, an dem Sie gerade arbeiten. Bei dieser ersten Methode ist jedoch eine Zeile essentiell: 

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

Dies blendet alle 'Seiten' außer der ersten aus. So erscheint die Seite beim ersten Laden normal.

Das JavaScript

So, jetzt zu erklären, was wir über jQuery erreichen müssen. In unserer Datei custom.js müssen wir ein Targeting vornehmen, wenn der Benutzer auf einen Navigationslink klickt. Rufen Sie den href-Link ab und suchen Sie den Abschnitt mit derselben ID. Verstecken Sie dann alles im # main-content div und blenden Sie den neuen Abschnitt ein. So sieht es aus: 

$(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 (/ ^ # /, ''); wechseln (hash) {case 'page2': $ ("#" + hash + "-link"). trigger ("klick"); break; fall 'page3': $ ("#" + hash + "-link"). trigger ("klick"); break; fall 'page4': $ ("#" + hash + "-link"). trigger ("klick"); break;}});

Dieser Code ist in zwei Abschnitte unterteilt, der erste erreicht das, worüber wir gerade gesprochen haben. Es hat eine Klick-Funktion auf den Header-Nav-Links. Es setzt dann '# page1, # page2' usw. in eine Variable namens $ linkClicked. Wir aktualisieren dann die URL des Browsers, um denselben Hash-Namen zu erhalten. Dann haben wir eine if-Anweisung, die sicherstellt, dass der Link, auf den wir klicken, nicht der aktuelle Tab ist, wenn es dann nichts tut, aber wenn nicht, den aktuellen Inhalt ausblenden und das div mit einer ID von $ linkClicked sichtbar machen. So einfach ist das!

Der zweite Abschnitt prüft, ob die URL am Ende eine Hash-Verknüpfung hat. Wenn dies der Fall ist, findet sie auf der Seite einen entsprechenden Link mit dem gleichen Wert (deshalb haben die Links bestimmte IDs im Markup) und löst dann das aus Link (es klickt darauf). Das bedeutet, dass der Benutzer eine Seite neu laden kann, nachdem er zu einer "Seite" navigiert hat, und die Aktualisierung wird den Benutzer zurück dorthin senden, anstatt nur zurück zur ersten Seite, was oft ein Problem mit dieser Art von System sein kann.

Das ist das Ende der ersten Methode. Dies führt zu einer funktionierenden statischen Site, die einen sofortigen Austausch von Inhalten aufweist und keine Seite neu lädt. Der einzige Nachteil dieser Methode ist die Tatsache, dass der gesamte Inhalt beim ersten Laden aufgerufen wird, da alles in der Indexdatei vorhanden ist. Dies kann zu einem Problem mit Fotos und zusätzlichen Inhalten führen, wodurch der erste Besuch vor Ort etwas länger dauert. Sehen wir uns also einen anderen Weg an, um denselben Effekt zu erzielen, der dieses Problem beseitigen kann.

AJAX und PHP verwenden

Um den gleichen Effekt zu erreichen, aber auf eine etwas andere Art und Weise, so dass die anfängliche Belastung nicht unseren gesamten Inhalt lädt und ihn somit verlangsamt (den Punkt zu besiegen, wenn die Seite viel Inhalt hat), werden wir etwas verwenden PHP und AJAX. Das bedeutet, dass sich die Dateistruktur für unser Projekt ändert und wie folgt aussieht:

Struktur

Wenn Sie also nachsehen, ist die Indexdatei jetzt eine .php und keine .html. Wir haben auch eine extra Datei namens 'load.php' sowie ein neues Verzeichnis namens pages, in dem sich vier HTML-Seiten befinden. Wenn Sie also lokal arbeiten, müssen Sie eine lokale Entwicklungsumgebung einrichten MAMP (für Mac) oder WAMP Server (für Windows). Oder Sie können den gesamten Ordner auf einen Webserver hochladen, wenn Sie dort Zugriff haben und bearbeiten, im Grunde benötigen Sie eine Umgebung, in der PHP funktioniert.

Die index.php hat nur eine Sache geändert, aber es ist wichtig, dass wir nicht den gesamten Inhalt dort laden und einfach den ursprünglichen Inhalt mit einem PHP-Include aufrufen. Es sieht jetzt ungefähr so ​​aus: 

AJAX a Static Site

Also die Linie beginnt ruft die erste HTML-Datei von unserem Seitenordner ab und fügt sie vollständig in unseren # Hauptinhalt DIV ein. Die aufgerufene Datei kann den Inhalt enthalten, der auf der Seite erscheinen soll.

Verwenden von $ .ajax im JavaScript

Lassen Sie uns auf das neue JavaScript übergehen, es sieht jetzt etwas anders aus, hauptsächlich verwenden wir jetzt AJAX, um den neuen Inhalt von jeder HTML-Datei zu holen, wenn der Benutzer auf eine entsprechende Navigation klickt. Hier ist die erste Funktion im Code (die zweite bleibt die gleiche wie zuvor): 

$(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 ();}});

Also lasst uns erklären, was vor sich geht. Wir fügen eine weitere Variable hinzu, nämlich $ pageRoot. Dies ist im Grunde die tatsächliche Zahl, die angeklickt wurde (indem der ## Seite-Teil des Hash-Links verwendet und die individuelle Nummer verlassen wird). Dann innerhalb der gleichen "if" -Anweisung wie zuvor, rufen wir Ajax auf und verwenden die andere PHP-Datei, die wir zuvor erwähnt haben, um die gegebene Information zu analysieren (welcher Link wurde angeklickt) und die entsprechende Seite zu finden. Wenn es dann ohne Fehler zurückkommt, fügen wir den neuen HTML-Code aus der empfangenen Datei in unseren # Hauptinhalts-DIV ein. Um es plötzlich zu ändern, verstecken wir alles und blenden es dann ein.

Laden.php

Der Inhalt der neuen PHP-Datei ist kurz und bündig, sie nimmt die Seitennummer, die jQuery gesendet hat, und prüft, ob die entsprechende HTML-Datei existiert. Wenn es das tut, bekommt es den ganzen Inhalt und gibt es an die AJAX-Funktion zurück (die wir vor kurzem gezeigt haben, dass wir diesen Inhalt in den Haupt-DIV einfügen).

Danach sollte die Seite so aussehen, wie Sie es wollen, aber meistens richtig funktionieren.

Das ist es! Die Site ruft nun jedes Mal die richtige HTML-Datei auf, wenn der Benutzer auf einen Navigationslink klickt. Es tauscht den Inhalt aus, ohne die Seite neu laden zu müssen. Und so muss es immer noch nicht den gesamten Inhalt der ersten Seitenladung aufrufen! Ich hoffe, dass Sie es geschafft haben, eine nützliche Methode aus diesem Tutorial zu lernen, und dass Sie damit einige Projekte verbessern können.

Sie können die jQuery-Demo hier, das PHP Demo hier, oder Downloade die Quelle und schau genauer hin.

Haben Sie AJAX zum Laden von Inhalten verwendet? Haben Sie eine ähnliche Technik verwendet, um Ihre Website zu beschleunigen? Teilen Sie uns Ihre Gedanken in den Kommentaren mit.

Ausgewähltes Bild / Vorschaubild, aufgeladenes Bild über Shutterstock.

Website-Geschwindigkeit Jquery Ajax Ladetechniken php Beschleunigen Sie Ihre Website