Interaktiv design

Slik overlaster du områdets hastighet med AJAX og JQuery

I denne opplæringen skal vi se på hvordan du kan øke brukeropplevelsen på små statiske nettsteder ved hjelp av noen forskjellige metoder. (Et statisk nettsted er en som ikke har noe fornyende innhold, så ingen blogginnlegg eller fotostrømmer etc.)

Måten vi skal gjøre dette på, er å ta ut sidelast. Så enkelt sett, når brukeren bruker noen navigasjonsforbindelser, endres bare hovedinnholdet på siden, og det gjør ikke nettleseren på nytt på siden.

Vi vil oppnå denne effekten på to forskjellige måter, den første bruker bare jQuery, og den andre bruker AJAX og noen PHP. De har begge sine fordeler og ulemper, som vi også ser på. Se på demoen for å se hva vi prøver å oppnå, og la oss starte med den første (og enklere) jQuery-metoden.

Oppnå effekten med jQuery

Først vil vi se på oppsettet for siden. HTML er veldig enkel, men har noen viktige deler, "essensielle" som det var. Vi trenger noen navigasjonsforbindelser som har et bestemt hash href (som vi skal forklare om et minutt) og et spesifisert innholdsområde som du allerede vil ha på et hvilket som helst annet nettsted uansett. Så la oss først se hva som finnes i vår index.html-fil: 

Speed Up Static Sites with jQuery
  Første side tittel 
  Første side innhold. 
  Se, ingen sidelast! 
  Andre sideinnhold. 
  Ooh visne! 
  Tredjersideinnhold. 
  Fjerde sidetittel 
  Fjerde sideinnhold.

Så for å se på de viktige delene av hva som må gå inn i oppslaget: Vi har vår navigasjon der hver lenke har en href av den tilsvarende DIV. Så koblingen til "Page 2" har en href = "# page2" (som er ID for

elementet lenger nede). Så med denne første metoden som du ser, har vi en div av # hovedinnhold som omgir våre seksjoner, og deretter inneholder hver side en etter hverandre i sitt eget separate avsnitt. Vi kaller også jQuery og vår egen custom.js javascript-fil der den faktiske funksjonaliteten til nettstedet blir gjort.

Men før vi kommer til det må vi legge til en linje til vårt CSS, det er ikke nødvendig å gå over hele CSS-filen for dette eksempelet, da det er alt bare for utseende, noe som vil forandre seg med hvilket prosjekt du jobber med. Men med denne første metoden er det en linje som er viktig, og det er: 

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

Dette skjuler alle sidene, bortsett fra den første. Så vises siden vanligvis på første belastning.

JavaScript

Så nå for å forklare hva vi trenger å oppnå via jQuery. I vår custom.js-fil må vi målrette når brukeren klikker på en navigasjonslink. Hent sin href-kobling og finn 'delen' med samme ID, og ​​skjul alt i # hovedinnhold div og fade i den nye delen. Slik 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;}  ellers {return false;}}); var hash = window.location.hash; hash = hash.replace (/ ^ # /, ''); bytte (hash) {case 'page2': $ ("#" + hash + "-link"). trigger ("klikk"); break; case 'page3': $ ("#" + hash + "-link"). trigger ("klikk"); break; case 'page4': $ ("#" + hash + "-link"). trigger ("klikk"); pause;}});

Denne koden er delt i to seksjoner, den første oppnår det vi nettopp snakket om. Den har en klikkfunksjon på header nav-linkene. Den legger deretter «# side1, # side2» etc inn i en variabel som heter $ linkClicked. Vi oppdaterer nettleserens nettadresse for å ha det samme hashnavnet. Deretter har vi en if-setning som sikrer at lenken vi klikker ikke er den nåværende kategorien, hvis den ikke gjør noe, men hvis ikke skjul alt nåværende innhold og avslør diven med en ID på $ linkClicked. Så enkelt som det!

Den andre delen kontrollerer om nettadressen har en hash-kobling på slutten av den, hvis den finner det, finner den en tilsvarende lenke på siden med samme verdi (det er derfor koblingene har bestemte IDer i oppslaget) og så utløser det at lenke (den klikker på den). Hva dette betyr, betyr at brukeren kan laste inn en side etter å ha navigert til en side og oppdateringen vil sende brukeren tilbake der istedenfor bare tilbake til første side, noe som ofte kan være et problem med denne typen system.

Så det er slutten på den første metoden, dette resulterer i et fungerende statisk nettsted som har øyeblikkelig innholdsbytte, og ingen side oppdateres. Den eneste ulempen med denne metoden er at alt innhold blir kalt på innledende last, da det er alt der i indeksfilen. Dette kan begynne å være et problem med bilder og ekstra innhold som gjør det første besøket belastet litt lenger. Så la oss se på en annen måte å gjøre samme effekt som kan eliminere det problemet.

Bruke AJAX og PHP

For å oppnå den samme effekten, men på en litt annen måte, slik at den innledende belastningen ikke kommer til å laste inn alt innholdet vårt og dermed sakte det ned (beslaglagt punktet hvis nettstedet har mye innhold) vil vi bruke litt PHP og AJAX. Dette betyr at filstrukturen for prosjektet vårt vil endre seg og se slik ut:

struktur

Så hvis du ser, er indeksfilen nå en .php og ikke en .html. Vi har også en ekstra fil med navnet 'load.php', samt en ny mappe / katalog som heter sider der det er fire HTML-sider. Nå betyr dette at hvis du jobber lokalt, må du sette opp et lokalt utviklingsmiljø med noe som helst MAMP (for Mac) eller WAMP Server (for Windows). Eller du kan laste opp hele mappen til en webserver hvis du har tilgang og redigere der, i utgangspunktet trenger du et miljø der PHP vil fungere.

Indeksen.php har bare endret en ting, men det er viktig, vi vil ikke laste inn alt innhold der inne, og bare ringe inn det innledende innholdet med en PHP inkludert. Det vil nå se slik ut: 

AJAX a Static Site

Så linjen begynner kaller inn den første HTML-filen fra vår mappe på sider og setter inn helt inn i våre # hovedinnhold DIV. Filen som heter kan inneholde alt innholdet du vil se på siden.

Bruker $ .ajax i JavaScript

La oss flytte inn på det nye JavaScript, det ser nå litt annerledes ut, for det meste bruker vi nå AJAX for å hente det nye innholdet fra hver HTML-fil når brukeren klikker på en viss tilsvarende navigasjon. Her er den første funksjonen i koden (den andre forblir 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å la oss forklare hva som skjer. Vi legger til en ekstra variabel, det er $ pageRoot. Dette er i utgangspunktet det faktiske nummeret som klikkes (tar vei "#page" -delen av hashlinken og forlater det enkelte nummer). Så inne i samme "if" -uttalelsen som før, kaller vi ajax og bruker den andre PHP-filen vi nevnte tidligere, til å analysere informasjonen gitt (hvilken lenke er klikket) og finn den tilsvarende siden. Så hvis det kommer tilbake uten feil, setter vi inn den nye HTML-filen fra filen mottatt i vårt # hovedinnhold DIV. Så bare for å stoppe det skiftende plutselig, skjuler vi alt og fader det inn.

load.php

Innholdet i den nye PHP-filen er kort og søt, det tar sidenummeret som jQuery har sendt det og ser for å se om den tilsvarende HTML-filen eksisterer. Hvis det gjør det, blir det alt innholdet og returnerer det til AJAX-funksjonen (som vi viste for et øyeblikk siden at vi legger inn innholdet i hoveddivisjonen).

Etter at nettstedet burde se men du vil ha det til, men det meste fungerer som det skal.

Det er det! Nettstedet ringer nå i riktig tilsvarende HTML-fil hver gang brukeren klikker på en navigasjonslink. Det bytter ut innholdet uten å gjøre siden oppdatert. Og på denne måten behøver det fortsatt ikke å ringe alt innholdet på den første siden lasten! Jeg håper du har klart å lære noen nyttig metode fra denne opplæringen, og at du kan bruke den til å forbedre et prosjekt på en eller annen måte.

Du kan vise jQuery demo her, de PHP demo her, eller last ned kilden og ta en nærmere titt.

Har du brukt AJAX for å laste inn innhold? Har du brukt en lignende teknikk for å øke hastigheten på nettstedet ditt? Gi oss beskjed om dine tanker i kommentarene nedenfor.

Utvalgt bilde / miniatyrbilde, superladet bilde via Shutterstock.

nettside hastighet jquery sidens hastighet ajax lasting teknikker php Fremskynde nettstedet ditt