Första sidan Titel
Första sidans innehåll.
Titta, ingen sidladdning!
Andra sidinnehåll.
Oha blekna!
Tredje sidinnehåll.
Fjärde sidtitel
Fjärde sidinnehåll.
Hur Supercharge din webbplats hastighet med AJAX och JQuery
I den här handledningen kommer vi att titta på hur man påskyndar användarupplevelsen på små statiska webbplatser med hjälp av några olika metoder. (En statisk webbplats är en som inte har någon förnyande innehåll, så inga blogginlägg eller bildströmmar etc.)
Det sätt på vilket vi ska göra detta är att ta bort sidladdningar. Så enkelt, när användaren använder några navigeringslänkar, ändras endast huvudinnehållet på sidan och det gör inte webbläsaren om att ladda om sidan.
Vi kommer att uppnå denna effekt på två olika sätt, den första använder endast jQuery, och den andra använder AJAX och en del PHP. De har båda sina fördelar och nackdelar, som vi ska titta på också. Ta en titt på demo för att se vad vi försöker uppnå och låt oss börja med den första (och enklare) jQuery-metoden.
Uppnå effekten med jQuery
Först kommer vi att titta på inställningen för sidan. HTML är mycket enkel men har några viktiga delar, "de viktigaste" som det var. Vi behöver några navigeringslänkar som har en specifik hash href (som vi kommer att förklara om en minut) och ett visst innehållsområde som du redan skulle ha på någon annan sida ändå. Så låt oss först se vad som finns i vår index.html-fil:
Speed Up Static Sites with jQuery
Så att återskapa de viktiga delarna av vad som behöver gå in i markeringen: Vi har vår navigering där varje länk har en href av motsvarande DIV. Så länken till "Page 2" har en href = "# page2" (vilken är ID för
Men innan vi får det behöver vi lägga till en rad till vår CSS, det finns ingen anledning att gå över hela CSS-filen för det här exemplet eftersom det bara är för utseende, vilket kommer att förändras med vilket projekt du arbetar på. Men med den här första metoden finns det en rad som är viktigt och det är:
#page2, #page3, #page4 {display: none;}Detta döljer alla sidor utom den första. Så sidan visas normalt på första belastningen.
JavaScript
Så nu för att förklara vad vi behöver uppnå via jQuery. I vår custom.js-fil måste vi rikta in när användaren klickar på en navigeringslänk. Hämta href-länken och hitta "avsnittet" med samma ID, dölja sedan allt i # main content-diven och blekna i det nya avsnittet. Så här ser det ut:
$(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;} annars {return false;}}); var hash = window.location.hash; hash = hash.replace (/ ^ # /, ''); switch (hash) {case'page2 ': $ ("#" + hash + "-link"). trigger ("click"); break; case'page3 ': $ ("#" + hash + "-link"). trigger ("klicka"); break; case' page4 ': $ ("#" + hash + "-link"). trigger ("click"); break;}}); Denna kod är uppdelad i två sektioner, den första uppnår det vi bara pratat om. Den har en klickfunktion på länkarna för header nav. Det lägger sedan "# page1, # page2" etc till en variabel med namnet $ linkClicked. Vi uppdaterar sedan webbläsarens URL för att få samma namn. Då har vi ett if-förklaring som säkerställer att länken vi klickar inte är den aktuella fliken, om den då inte gör något, men om inte dölja allt nuvarande innehåll och förklara div med ett ID på $ linkClicked. Enkelt som det!
Den andra delen kontrollerar om URL-adressen har en hash-länk i slutet av den, om den gör det hittar den en motsvarande länk på sidan med samma värde (det är därför länkarna har specifika ID-nummer i markeringen) och sedan utlöser det att länk (den klickar på den). Vad det här betyder betyder att användaren kan ladda om en sida efter att ha navigerat till en sida och uppdateringen skickar användaren tillbaka där istället för bara tillbaka till första sidan, vilket ofta kan vara ett problem med det här systemet.
Så det är slutet på den första metoden, vilket resulterar i en fungerande statisk webbplats som har omedelbar innehållsbyte och ingen sida laddas om. Den enda nackdelen med den här metoden är det faktum att allt innehåll kallas initialbelastningen, eftersom det är allt där i indexfilen. Detta kan börja bli ett problem med bilder och extra innehåll som gör att det första besöket laddas lite längre. Så låt oss titta på ett annat sätt att göra samma effekt som kan eliminera det problemet.
Använda AJAX och PHP
För att uppnå samma effekt men på ett något annorlunda sätt, så att den initiala belastningen inte kommer att ladda hela vårt innehåll och därmed sakta ner det (slår punkten om webbplatsen har mycket innehåll) kommer vi att använda lite PHP och AJAX. Det betyder att filstrukturen för vårt projekt kommer att förändras och se ut så här:
Så om du tittar är indexfilen nu en .php och inte en .html. Vi har också en extra fil med namnet 'load.php' samt en ny mapp / katalog som heter sidor där det finns fyra HTML-sidor. Nu innebär det att om du jobbar lokalt måste du skapa en lokal utvecklingsmiljö med något liknande MAMP (för Mac) eller WAMP Server (för Windows). Eller du kan ladda upp hela mappen till en webbserver om du har tillgång och redigera där, i princip behöver du en miljö där PHP kommer att fungera.
Index.php har bara ändrat en sak, men det är viktigt att vi nu inte laddar upp allt innehåll där och helt enkelt ringa in det inledande innehållet med en PHP inkludera. Det ser nu ut så här:
AJAX a Static Site
Så linjen börjar anropar den första HTML-filen från vår mapp på sidor och sätter in helt i vårt # huvudinnehåll DIV. Filen som heter kan innehålla vilket innehåll som helst som du vill se på sidan.
Använda $ .ajax i JavaScript
Låt oss gå vidare till den nya JavaScript, det ser nu lite annorlunda ut, för det mesta använder vi nu AJAX för att hämta det nya innehållet från varje HTML-fil när användaren klickar på någon motsvarande navigering. Här är den första funktionen i koden (den andra förblir densamma som tidigare):
$(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 ();}}); Så låt oss förklara vad som händer. Vi lägger till ytterligare en variabel, det är $ pageRoot. Detta är i grund och botten det faktiska antalet klickat (tar vägen till "#page" -delen av hash-länken och lämnar det enskilda numret). Sedan inne i samma "if" -sats som tidigare kallar vi ajax och använder den andra PHP-filen som vi nämnde tidigare för att analysera informationen (vilken länk har klickat) och hitta motsvarande sida. Sedan om det kommer tillbaka utan något fel lägger vi in den nya HTML-filen från filen som har tagits emot i vårt # huvudinnehåll DIV. Då bara för att sluta ändra det plötsligt, gömmer vi allt och sedan bleknar det.
load.php
Innehållet i den nya PHP-filen är kort och söt, det tar det sidnummer som jQuery har skickat det och ser ut om den motsvarande HTML-filen finns. Om det gör det blir allt innehåll och returnerar det till AJAX-funktionen (som vi visade för ett ögonblick sedan att vi sätter in det innehållet i DIV-huvudet).
Därefter ska webbplatsen se ut men du vill ha den, men fungerar mest.
Det är allt! Webbplatsen ringer nu i rätt motsvarande HTML-fil varje gång användaren klickar på en navigeringslänk. Det byter ut innehållet utan att sidan laddas om. Och på så sätt behöver det fortfarande inte ringa allt innehåll på den första sidbelastningen! Jag hoppas att du har lyckats lära dig några användbara metoder från den här handledningen och att du kan använda den för att förbättra något projekt på något sätt.
Du kan se jQuery demo här, de PHP demo här, eller ladda ner källan och ta en närmare titt.
Har du använt AJAX för att ladda innehåll? Har du använt en liknande teknik för att påskynda din webbplats? Låt oss veta dina tankar i kommentarerna nedan.
Utvalda bild / miniatyrbild, överladdad bild via Shutterstock.