Interactief ontwerp

Hoe de snelheid van uw site te verhogen met AJAX en JQuery

In deze zelfstudie gaan we kijken hoe we de gebruikerservaring op kleine statische sites kunnen versnellen met behulp van een paar verschillende methoden. (Een statische site is er een die geen vernieuwende inhoud heeft, dus geen blogposts of fotostreams enz.)

De manier waarop we dit gaan doen, is door pagina herladen te verwijderen. Dus simpel gezegd, wanneer de gebruiker een aantal navigatielinks gebruikt, verandert alleen de hoofdinhoud van de pagina en wordt de pagina niet opnieuw geladen.

We zullen dit effect op twee verschillende manieren bereiken, de eerste gebruikt alleen jQuery en de andere gebruikt AJAX en wat PHP. Ze hebben allebei hun voor- en nadelen, en daar zullen we ook naar kijken. Kijk eens naar de demo om te zien wat we proberen te bereiken en laten we beginnen met de eerste (en eenvoudigere) jQuery-methode.

Het effect bereiken met jQuery

Eerst zullen we kijken naar de instellingen voor de pagina. De HTML is heel eenvoudig, maar heeft een paar belangrijke delen, als het ware 'de essentie'. We hebben enkele navigatielinks nodig die een specifieke hash-href hebben (die we in een minuut zullen uitleggen) en een gespecificeerd inhoudsgebied dat je toch al op een andere site zou hebben. Laten we eerst eens kijken wat er in ons index.html-bestand staat: 

Speed Up Static Sites with jQuery
  Eerste paginatitel 
  Eerste pagina-inhoud. 
  Kijk, geen enkele pagina laadt! 
  Tweede pagina-inhoud. 
  Ooh fade! 
  Inhoud van de derde pagina. 
  Vierde paginatitel 
  Vierde pagina-inhoud.

Dus om de belangrijke delen van wat in de opmaak moet gaan samen te vatten: we hebben onze navigatie waarin elke link een href van de overeenkomstige DIV heeft. Dus de link naar "Pagina 2" heeft een href = "# page2" (wat de id is van de

element verder naar beneden). Dus met deze eerste methode zoals je kunt zien hebben we een div van # main-content rond onze secties, en dan elke pagina-inhoud de een na de ander in hun eigen aparte 'sectie' element. We noemen ook jQuery en ons eigen javascript-bestand custom.js waarin de daadwerkelijke functionaliteit van de site wordt vermeld.

Maar voordat we dat doen, moeten we één regel toevoegen aan onze CSS, het is niet nodig om het hele CSS-bestand voor dit voorbeeld te doorlopen, omdat het allemaal alleen voor uiterlijk is, wat verandert met welk project je ook aan het werken bent. Bij deze eerste methode is er echter één regel die essentieel is en dat is: 

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

Dit verbergt alle 'pagina's' behalve de eerste. Dus de pagina verschijnt normaal bij de eerste keer laden.

JavaScript

Dus nu om uit te leggen wat we moeten bereiken via jQuery. In ons aangepaste.js-bestand moeten we targeten wanneer de gebruiker op een navigatielink klikt. Haal de href-link op en zoek de 'sectie' met dezelfde ID en verberg alles in de # main-content div en fade in de nieuwe sectie. Dit is hoe het eruit ziet: 

$(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': $ ("#" + hash + "-link"). trigger ("klik"); breek; case 'page3': $ ("#" + hash + "-link"). trigger ("klik"); breek; case 'page4': $ ("#" + hash + "-link"). trigger ("klik"); pauze;}});

Deze code is opgesplitst in twee delen, de eerste bereikt wat we zojuist hebben besproken. Het heeft een klikfunctie op de navels van de kopnavigatie. Vervolgens plaatst het de '# page1, # page2' etc in een variabele met de naam $ linkClicked. Vervolgens werken we de URL van de browser bij om dezelfde hash-naam te hebben. Dan hebben we een if-instructie die ervoor zorgt dat de link waarop we klikken niet het huidige tabblad is, als het dan niets doet, maar als het niet alle huidige inhoud verbergt en de div weer zichtbaar maakt met een ID van $ linkClicked. Simpel als dat!

De tweede sectie controleert of de URL een hash-link heeft aan het einde ervan. Als dit het geval is, vindt het een overeenkomstige link op de pagina met dezelfde waarde (daarom hebben de links specifieke ID's in de markup) en activeert dat vervolgens link (het klikt erop). Wat dit doet, is dat de gebruiker een pagina kan herladen nadat hij naar een 'pagina' is genavigeerd en de verversing stuurt de gebruiker terug in plaats van terug naar de eerste pagina, wat vaak een probleem kan zijn met dit soort systemen.

Dus dat is het einde van de eerste methode, dit resulteert in een werkende statische site die ogenblikkelijk inhoudsruil heeft en geen pagina opnieuw laadt. Het enige nadeel van deze methode is dat alle inhoud wordt aangeroepen bij de initiële belasting, omdat het allemaal in het indexbestand staat. Dit kan een probleem worden met foto's en extra inhoud, waardoor het eerste bezoek aan de site iets langer wordt. Laten we dus eens naar een andere manier kijken om hetzelfde effect te bereiken dat dat probleem kan oplossen.

AJAX en PHP gebruiken

Om ditzelfde effect te bereiken, maar op een enigszins andere manier, zodat de initiële belasting niet al onze inhoud gaat laden en dus vertragen (het verslaan van het punt als de site veel inhoud bevat) zullen we een beetje gebruiken PHP en AJAX. Dit betekent dat de bestandsstructuur voor ons project zal veranderen en er als volgt uit zal zien:

structuur

Dus als je kijkt, is het indexbestand nu een .php en geen .html. We hebben ook een extra bestand met de naam 'load.php' en een nieuwe map / map met de naam 'pages' waarin vier HTML-pagina's staan. Dit betekent dat als u lokaal werkt, u een lokale ontwikkelomgeving moet opzetten met iets als MAMP (voor Mac) of WAMP-server (voor ramen). Of u kunt de hele map uploaden naar een webserver als u daar toegang en bewerken hebt, in principe heeft u een omgeving nodig waar de PHP zal werken.

De index.php heeft maar één ding veranderd, maar het is belangrijk, we zullen nu niet alle inhoud daarin laden, en gewoon de initiële inhoud binnen bellen met een PHP-include. Het ziet er nu ongeveer zo uit: 

AJAX a Static Site

Dus de lijn begint roept het eerste HTML-bestand in vanuit onze map met pagina's en integreert het volledig in onze # hoofdinhoud DIV. Het bestand dat wordt genoemd, kan de inhoud bevatten die u op de pagina wilt weergeven.

$ .Ajax gebruiken in JavaScript

Laten we verder gaan met het nieuwe JavaScript, het ziet er nu iets anders uit, voornamelijk gebruiken we nu AJAX om de nieuwe inhoud van elk HTML-bestand op te halen wanneer de gebruiker op een overeenkomstige navigatie klikt. Dit is de eerste functie in de code (de tweede blijft hetzelfde als eerder): 

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

Dus laten we uitleggen wat er aan de hand is. We voegen nog een variabele toe, dat is $ pageRoot. Dit is eigenlijk het daadwerkelijke aantal aangeklikte punten (waarbij het gedeelte '#page' van de hash-link is overgenomen en het individuele nummer is weggelaten). Vervolgens binnen dezelfde "als" -instructie als voorheen, bellen we ajax en gebruiken we het andere PHP-bestand dat we eerder noemden om de gegeven informatie te ontleden (op welke link is geklikt) en de bijbehorende pagina te vinden. Als het dan zonder fouten terugkomt, voegen we de nieuwe HTML van het ontvangen bestand in onze # hoofdinhoud DIV. Om het plotseling te laten veranderen, verbergen we alles en laten we het vervolgens vervagen.

load.php

De inhoud van het nieuwe PHP-bestand is kort en krachtig, het neemt het paginanummer dat jQuery heeft verzonden en kijkt of het bijbehorende HTML-bestand bestaat. Als dit het geval is, wordt alle inhoud opgehaald en geretourneerd naar de AJAX-functie (wat we zojuist hebben laten zien dat we die inhoud invoegen in de hoofd-DIV).

Daarna moet de site er uitzien zoals u wilt, maar meestal correct werken.

Dat is het! De site roept nu het juiste bijbehorende HTML-bestand op telkens wanneer de gebruiker op een navigatielink klikt. Het wisselt de inhoud uit zonder de pagina te herladen. En op deze manier hoeft het nog steeds niet alle inhoud te bellen bij het laden van de eerste pagina! Ik hoop dat het je gelukt is om een ​​bruikbare methode uit deze tutorial te leren en dat je deze kunt gebruiken om een ​​of ander project op de een of andere manier te verbeteren.

U kunt de jQuery-demo hier, de PHP demo hier, of download de bron en neem een ​​kijkje.

Heeft u AJAX gebruikt om inhoud te laden? Heb je een vergelijkbare techniek gebruikt om je site te versnellen? Laat ons je mening weten in de reacties hieronder.

Uitgelichte afbeelding / thumbnail, Supercharged afbeelding via Shutterstock.

website snelheid jQuery Ajax laadtechnieken php sitesnelheid versnellen uw site