Første side Titel
Første side indhold.
Se, ingen sidebelastning!
Andet sideindhold.
Ooh falme!
Tredjers indhold.
Fjerde side titel
Fjerde sideindhold.
Sådan Supercharge dit websted hastighed med AJAX og JQuery
I denne vejledning skal vi se på, hvordan man hurtigere brugeroplevelsen på små statiske steder ved hjælp af et par forskellige metoder. (Et statisk websted er et, der ikke har noget fornyende indhold, så ingen blogindlæg eller billedstrømme mv.)
Den måde, hvorpå vi skal gøre dette, er ved at tage sideoplæsninger tilbage. Så enkelt sagt, når brugeren bruger nogle navigationslinks, ændres kun hovedindholdet på siden, og det gør ikke browseren genindlæser siden.
Vi opnår denne effekt på to forskellige måder, den første bruger kun jQuery, og den anden bruger AJAX og nogle PHP. De har begge deres fordele og ulemper, som vi også ser på. Se på demoen for at se, hvad vi forsøger at opnå, og lad os starte med den første (og enklere) jQuery-metode.
Opnåelse af effekten med jQuery
Først vil vi se på opsætningen til siden. HTML er meget simpelt, men har nogle få vigtige dele, "de væsentligste" som det var. Vi har brug for nogle navigationskoblinger, der har et specifikt hash href (som vi forklarer om et minut) og et bestemt indholdsområde, som du alligevel vil have på et andet websted. Så lad os først se, hvad der findes i vores index.html-fil:
Speed Up Static Sites with jQuery
Så for at genskabe de vigtige dele af hvad der skal gå ind i markeringen: Vi har vores navigation, hvor hvert link har en href af den tilsvarende DIV. Så linket til "Page 2" har en href = "# page2" (som er id'en til
Men før vi kommer til det, skal vi tilføje en linje til vores CSS, det er ikke nødvendigt at gå over hele CSS-filen til dette eksempel, da det kun er for udseende, hvilket vil ændre sig med det projekt, du arbejder på. Men med denne første metode er der en linje, der er afgørende, og det er:
#page2, #page3, #page4 {display: none;}Dette gemmer alle siderne undtagen den første. Så vises siden normalt på første belastning.
JavaScript
Så nu for at forklare, hvad vi skal opnå via jQuery. I vores custom.js-fil skal vi målrette, når brugeren klikker på et navigationslink. Hent href-linket og find 'sektionen' med samme ID, og gem derefter alt i # main content div og fade i det nye afsnit. Sådan ser det ud:
$(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;} ellers {return false;}}); var hash = window.location.hash; hash = hash.replace (/ ^ # /, ''); switch (hash) {case 'page2': $ ("#" + hash + "-link"). trigger ("klik"); break; case'page3 ': $ ("#" + hash + "-link"). trigger ("klik"); break; case' side4 ': $ ("#" + hash + "-link"). trigger ("klik"); break;}}); Denne kode er opdelt i to sektioner, den første opnår det, vi lige har talt om. Det har en klikfunktion på header nav links. Det sætter så '# page1, # page2' etc i en variabel med navnet $ linkClicked. Vi opdaterer derefter browserens URL for at have det samme hash-navn. Så har vi en if-sætning, der sikrer, at det link, vi klikker på, ikke er den aktuelle fane, hvis det ikke gør noget, men hvis ikke skjul alt det nuværende indhold og fjern div'en med et ID på $ linkClicked. Så simpelt er det!
Det andet afsnit kontrollerer, om url'et har hash-link på slutningen af det, hvis det gør det, finder det et tilsvarende link på siden med samme værdi (det er derfor, linkene har specifikke id'er i markeringen) og så udløser det link (det klikker på det). Hvad dette betyder betyder, at brugeren kan genindlæse en side efter at have navigeret til en 'side', og opdateringen sender brugeren tilbage der i stedet for bare tilbage til den første side, hvilket ofte kan være et problem med denne type system.
Så det er slutningen på den første metode, hvilket resulterer i et fungerende statisk websted, der har øjeblikkelig indholdsudveksling, og ingen side genindlæser. Den eneste ulempe ved denne metode er, at alt indhold kaldes på den indledende belastning, da det hele er der i indeksfilen. Dette kan begynde at være et problem med fotos og ekstra indhold, der gør det første besøg på stedet lidt længere. Så lad os se på en anden måde at gøre samme effekt, som kan fjerne problemet.
Brug af AJAX og PHP
For at opnå den samme effekt, men på en lidt anden måde, så den indledende belastning ikke vil indlæse alt vores indhold og dermed sætte det ned (besejre punktet, hvis webstedet har meget indhold) vil vi bruge lidt PHP og AJAX. Det betyder, at filstrukturen for vores projekt vil ændre sig og se sådan ud:
Så hvis du ser, er indeksfilen nu en .php og ikke en .html. Vi har også en ekstra fil med navnet 'load.php' samt en ny mappe / katalog kaldet sider, hvor der er fire HTML-sider. Nu betyder det, at hvis du arbejder lokalt, skal du oprette et lokalt udviklingsmiljø ved hjælp af noget lignende MAMP (til Mac) eller WAMP Server (Til Windows). Eller du kan uploade hele mappen på en webserver, hvis du har adgang og redigere der, skal du grundlæggende have et miljø, hvor PHP'en skal fungere.
Index.php har kun ændret en ting, men det er vigtigt, at vi nu ikke skal indlæse alt indhold derinde, og bare ringe til det oprindelige indhold med en PHP inkluderet. Nu ser det sådan ud:
AJAX a Static Site
Så linjen begynder kalder den første HTML-fil fra vores mappe af sider og indsætter helt i vores # main-content DIV. Den kaldte fil kan indeholde alt indhold, du vil se på siden.
Brug $ .ajax i JavaScript
Lad os gå videre til det nye JavaScript, det ser nu lidt anderledes ud, hovedsagelig bruger vi nu AJAX til at hente det nye indhold fra hver HTML-fil, når brugeren klikker på en tilsvarende navigation. Her er den første funktion i koden (den anden forbliver den samme som før):
$(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å lad os forklare, hvad der foregår. Vi tilføjer en mere variabel, det er $ pageRoot. Dette er i grunden det egentlige antal, der er klikket (tager plads på '#page'-delen af hash-linket og forlader det enkelte nummer). Så inden i samme "hvis" erklæring som før kalder vi ajax og bruger den anden PHP-fil, vi tidligere nævnte, til at analysere de givne oplysninger (hvilket link er blevet klikket) og finde den tilsvarende side. Så hvis det kommer tilbage uden nogen fejl, indsætter vi den nye HTML fra den fil, der er modtaget i vores # main-content DIV. Så bare for at stoppe det med at skifte pludselig skjuler vi alt og så falmer det ind.
load.php
Indholdet af den nye PHP-fil er kort og sød, det tager sidenummeret, som jQuery har sendt det, og ser ud til at se, om den tilsvarende HTML-fil eksisterer. Hvis det gør det, får det hele indholdet og returnerer det til AJAX-funktionen (som vi viste for et øjeblik siden, at vi indsætter det pågældende indhold i hoveddivisionen).
Efter dette skal webstedet se ud, men du vil have det til, men fungerer for det meste korrekt.
Det er det! Siden kalder nu i den rigtige tilsvarende HTML-fil hver gang brugeren klikker på et navigationslink. Det bytter ud indholdet uden at genoplæse siden. Og på denne måde behøver det stadig ikke at kalde hele indholdet på den indledende sidebelastning! Jeg håber du har formået at lære nogle nyttige metoder fra denne vejledning, og at du kan bruge den til at forbedre noget projekt på en eller anden måde.
Du kan se jQuery demo her, det PHP demo her, eller download kilden og se nærmere på.
Har du brugt AJAX til at indlæse indhold? Har du brugt en lignende teknik til at fremskynde dit websted? Lad os kende dine tanker i kommentarerne nedenfor.
Fremhævet billede / miniaturebillede, supercharged image via Shutterstock.