Název první stránky
Obsah první stránky.
Podívejte se, žádné načtení stránky!
Obsah druhé stránky.
Ooh se rozpadne!
Obsah třetí stránky.
Čtvrtý název stránky
Obsah čtvrté stránky.
Jak zvýšit rychlost vašeho webu pomocí AJAX a JQuery
V tomto tutoriálu se podíváme na to, jak urychlit uživatelskou zkušenost na malých statických webech pomocí několika různých metod. (Statický web je ten, který neobsahuje žádný obnovující obsah, takže žádné blogové příspěvky nebo fotografie, atd.)
Způsob, jakým to budeme dělat, je vyloučení opětovného načtení stránky. Takže jednoduše řečeno, když uživatel používá některé navigační odkazy, změní se pouze hlavní obsah stránky a neumožňuje prohlížeč znovu načíst stránku.
Tento efekt dosáhneme dvěma různými způsoby, první používá pouze jQuery a druhý používá AJAX a některé PHP. Oba mají své výhody a nevýhody, na které se také podíváme. Podívejte se na demo abychom zjistili, co se snažíme dosáhnout, a začneme první (a jednodušší) metodou jQuery.
Dosažení efektu pomocí jQuery
Nejprve se podíváme na nastavení stránky. HTML je velmi jednoduchý, ale má několik důležitých částí, "podstatné", jak byly. Potřebujeme několik navigačních odkazů, které mají specifický hash href (což vám vysvětlíme za minutu) a specifikovanou obsahovou oblast, kterou byste měli již na jakémkoli jiném místě. Takže nejprve uvidíme, co je v našem index.html souboru:
Speed Up Static Sites with jQuery
Takže, abychom znovu shromáždili důležité části toho, co musí jít do značky: máme naši navigaci, ve které má každý odkaz href odpovídajícího DIV. Takže odkaz na stránku "2" má href = "# page2" (což je id
Ale než se k tomu dostaneme, musíme přidat jeden řádek do našeho CSS, není třeba přejít celý soubor CSS pro tento příklad, protože to je všechno jen pro vzhled, který se změní bez ohledu na projekt, na kterém pracujete. Nicméně s touto první metodou existuje jedna řada, která je nezbytná a to je:
#page2, #page3, #page4 {display: none;}Toto skrývá všechny "stránky" kromě první. Stránka se proto zobrazuje normálně při prvním zatížení.
JavaScript
Takže nyní vysvětlete, co potřebujeme k dosažení pomocí jQuery. V našem souboru custom.js musíme cílit, když uživatel klepne na navigační odkaz. Načtěte jeho href odkaz a najděte "sekci" se stejným ID, pak skryjte vše v # main-content div a fade v nové sekci. To vypadá takto:
$(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;} jiný {return false}}); var hash = window.location.hash; hash = hash.replace (/ ^ # /, ''); přepínač (hash) {case 'page2' + "-link") spouštěč ("kliknutí"); zlom; případ "page3": $ ("#" + hash + ("#" + hash + "-link") spouštěč ("klikněte"); break;}}); Tento kód je rozdělen na dvě části, první dosáhne toho, o čem jsme právě mluvili. Má funkci kliknutí na hlavičkových navigačních linkách. Pak vloží proměnnou s názvem $ linkClicked '# page1, # page2' atd. Poté aktualizujeme adresu URL prohlížeče, abychom získali stejný název hash. Pak máme příkaz if, ujistěte se, že odkaz, který klikneme, není aktuální karta, pokud se pak nepodarí nic, ale pokud neukryje veškerý aktuální obsah a odhalí div s ID $ linkClicked. Jednoduché!
Druhá část zkontroluje, zda adresa URL na konci má hash odkaz, pokud ano, nalezne odpovídající odkaz na stránce se stejnou hodnotou (to je důvod, proč odkazy mají specifické ID v označení) a poté spustí odkaz (klikne na něj). Co to znamená, že uživatel může znovu načíst stránku po navigaci na 'stránku' a obnovení bude posílat uživatele zpět tam namísto jen zpátky na první stránku, což může být často problém s tímto typem systému.
Takže je to konec první metody, výsledkem je pracující statický web, který má okamžitý výměnu obsahu a žádná stránka se znovu načte. Jedinou nevýhodou této metody je skutečnost, že veškerý obsah je volán na počáteční zatížení, protože je to vše v indexovém souboru. To může začít s problémem s fotografiemi a dalším obsahem, které způsobí, že první návštěvy stránek se načítají o něco déle. Takže se podívejme na jiný způsob, jak udělat stejný efekt, který může tento problém odstranit.
Pomocí AJAX a PHP
Abychom dosáhli stejného efektu, ale trochu jinak, takže počáteční zátěž nezačne načítat celý náš obsah, a tím ho zpomalit (porazíme bod, pokud má web spoustu obsahu), použijeme trochu PHP a AJAX. To znamená, že struktura souboru pro náš projekt se změní a vypadá takto:
Takže pokud se podíváte, indexový soubor je nyní .php a ne .html. Máme také další soubor nazvaný 'load.php', stejně jako nový adresář / adresář nazvaný stránky, ve kterých jsou čtyři stránky HTML. To znamená, že pokud pracujete lokálně, musíte nastavit prostředí pro místní vývoj pomocí něčeho podobného MAMP (pro Mac) nebo WAMP Server (pro Windows). Nebo můžete nahrát celou složku na webový server, pokud máte přístup a upravíte tam, v podstatě budete potřebovat prostředí, ve kterém PHP funguje.
Index.php změnil pouze jednu věc, ale je důležité, že nyní nezačleňujeme veškerý obsah a jednoduše voláme počáteční obsah s obsahem PHP. Nyní bude vypadat takto:
AJAX a Static Site
Takže začátek řádku volá první soubor HTML z naší složky stránek a vkládá se zcela do našeho # main-content DIV. Soubor s názvem může obsahovat jakýkoli obsah, který chcete na stránce zobrazovat.
Pomocí programu .ajax v jazyce JavaScript
Pojďme se přesunout na nový JavaScript, teď to vypadá poněkud jinak, hlavně teď používáme AJAX, abychom načítali nový obsah z každého souboru HTML, když uživatel klikne na nějakou odpovídající navigaci. Zde je první funkce v kódu (druhá zůstává stejná jako předtím):
$(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 ();}}); Vysvětlete, co se děje. Přidáváme ještě jednu proměnnou, to je $ pageRoot. Jedná se v podstatě o skutečné číslo, na které jste klikli (zachycuje část "#page" hash odkazu a ponechává individuální číslo). Pak ve stejném příkazu "if", jak jsme předtím zavolali ajax a použili jsme jiný soubor PHP, který jsme zmínili dříve, abychom analyzovali danou informaci (na který odkaz jsme klikli) a našli odpovídající stránku. Pokud se vrátí bez chyby, vložíme nový HTML z přijímaného souboru do našeho # main-content DIV. A pak, abychom ji náhle přestali, skrýváme všechno a pak ho ztrácíme.
load.php
Obsah nového souboru PHP je krátký a sladký, jde o číslo stránky, které jQuery poslal a hledá, zda existuje příslušný soubor HTML. Pokud to udělá, získá veškerý obsah a vrátí jej do funkce AJAX (kterou jsme před chvílí ukázali, že vložíme tento obsah do hlavní DIV).
Následně by se měl web vypadat, jak to chcete, ale většinou funguje správně.
A je to! Stránka nyní volá ve správném odpovídajícím souboru HTML pokaždé, když uživatel klepne na navigační odkaz. Vyměňuje obsah bez toho, aby se stránka znovu načte. A tímto způsobem stále nemusí volat veškerý obsah na počáteční zatížení stránky! Doufám, že jste se podařilo naučit nějakou užitečnou metodu z tohoto tutoriálu a že ji můžete použít k nějakému zlepšení nějakého projektu.
Můžete zobrazit jQuery demo zde, PHP demo here, PHP demo zde, nebo stáhnout zdroj a podívejte se blíže.
Používali jste AJAX pro načítání obsahu? Využili jste podobnou techniku k urychlení vašeho webu? Dejte nám vědět své myšlenky v níže uvedených komentářích.
Doporučený snímek / náhled, přeplněný obraz přes Shutterstock.