Hulp gezocht bij keuze; Ajax gebruiken of niet?

[grumbkow]

Hallo!,

Ik zoek een opheldering.
Ik zal even uitleggen wat de bedoeling is en daarna mijn vraag plaatsen

Ik ben bezig met het ontwerpen/voorbereiden van een website en ben aan het nadenken over hoe de code er uit gaat zien.

De website bestaat uit een landingspagina met hierop een navigatie.
Zodra er op een menu-item wordt geklikt dan zal de pagina precies de hoogte van de browser naar beneden scrollen en de pagina tonen. De pagina heeft een terugknop waarmee de pagina weer naar de landingspagina scrolt.

Nu zie ik twee scenario's.

Alle pagina's staan al in de HTML en worden aan de hand van het gekozen menu-item zichtbaar gemaakt voor de pagina gaat scrollen.

Andere optie is dat elke pagina met ajax wordt ingeladen zodra deze nodig is.
Nu is mijn vraag, wat is sneller en gemakkelijker voor de gebruiker.

Ik kan me voorstellen dat eenmalig alle content van de gehele website (wat erg veel gaat worden) lang kan duren, ik kan me ook voorstellen dat het elke keer moeten wachten tot ajax de content geladen heeft erg vervelend kan zijn, en hoe zou je dit zien. Scrollen, dan een loader tot de content er is. Of met ajax de content laden en daarna pas de pagina naar dat punt toe laten scrollen.

Ter verduidelijking, er is dus ten alle tijden maar 1 pagina zichtbaar, de landingspagina of de gekozen pagina, alle andere pagina's worden op dat moment verborgen, maar kunnen dus met 1 scenario al wel in de HTML staan.

Ik hoop dat het dilemma een beetje duidelijk is

Groeten,

 

[Mister Quick]

Als ik het zo inschat dan lijkt een Ajax-oplossing een betere oplossing. Al wil ik nog een derde oplossing aangeven. Het is namelijk ook mogelijk om bijv. met JQuery en plugin JQuery Tabs een menu te maken die de content aanroept van HTML die in uw geval al in het geheel is geladen. Op deze manier heeft de gebruiker geen "last" van overbodige scrollmomenten en is met effecten uit breiden.

Het is overigens normaal en geaccepteerd dat gebruiker een minimale wachttijd kan verwachten als deze navigeert op een website. Snelheid van verbinding, snelheid van serverresponse zijn allemaal factoren die het gevoel van een bezoeker sterk kunnen beïnvloeden.

Optie 1
scrollen: niet doen!

Optie 2
JQuery + JQuery Tabs: mooie oplossing als er niet al teveel content getoond moet worden die een lange laadtijd van de hoofdpagina tot gevolg zou hebben. Dit kan gebruikers dusdanig afschrikken zodat men website verlaat. Eenmaal geladen werkt het navigeren sneller dan elke pagina met Ajax-request te moeten oproepen.

Optie 3
Ajax: zal laadtijd van homepagina versnellen aangezien deze korter is. Afhankelijk van de te laden content kan het laden van een pagina iets langzamer zijn doordat er toch elke keer een serverrequest plaatsvind. Zoals ik echter al eerder opmerkte zal dit afhankelijk zijn van veel omstandigheden die snelheid bepalen en daarbij is het "normaal" om een minimale wachttijd te hebben.

Is dit zo voldoende informatie?

 

[That Guy]

Moet opmerken dat jQuery Tabs precies het zelfde is als grumbkow als 1e scenario heeft. Immers, alle content staat op 1 pagina en via Javascript wordt gewisseld tussen de verschillende 'tabs'.



Ik denk dat het in-een-keer-laden van de content een stuk handiger gaat zijn. Uiteraard ligt dit aan de 'hoeveelheid' van de data, maar de hoeveelhied nadelen die XHR met zich meebrengt is het denk ik niet waard. Wat precies is 'erg veel'? Dit is de eerste vraag die beantwoord moet worden om dit vraagstuk op te lossen. Bedenk ook dat 'veel' data laden via XHR ook langzaam is!

In beide gevallen (XHR en alles-op-een-pagina) zou accessibility een van je belangrijkste punten moeten zijn omdat je immers werkt met veel Javascript. Gelukkig is het in beide gevallen mogelijk om hier een nette oplossing voor te verzinnen, hoewel het voor de een lastiger wordt dan de ander.

 

[Mister Quick]

@That Guy:

Het voordeel dat JQuery Tabs heeft is dat de overige content daadwerkelijk verborgen wordt in tegenstelling tot het [automatisch] scrollen naar de content zoals grumbkow middels optie 1 aangeeft.

Dan is een JQuery-plugin zoals Jquery Tabs de mooiste oplossing. Immers blijft de pagina optisch klein ook al is meer content dat de browser laat zien.

Ajax kan inderdaad een "hoofdpijnveroorzaker" zijn om dit correct te implementeren.

Blijft uiteindelijk toch een persoonlijk smaak van zowel de bezoeker als de bouwer

 

[That Guy]

Oh, volgens mij was het 1e idee juist dat je geen scrollbar had - een beetje zoals de jQuery presentation plugin (demo). Zie hier voor meer info.

 

[Mister Quick]

Dat klopt, maar focus van inleiding is:

Zodra er op een menu-item wordt geklikt dan zal de pagina precies de hoogte van de browser naar beneden scrollen en de pagina tonen.

Vandaar mijn opmerking over het scrollen! Ik ben redelijk bekend met diverse JQuery-technieken, vandaar dat ik grumbkow in de richting van JQuery wil "duwen". Of dat nou Tabs of Presentation is, dat is om het even.

 

[That Guy]

Ah, na het (opnieuw) herlezen van de OP zie ik inderdaad dat je gelijk hebt! :thumb:




Maargoed, punt blijft dat het ligt aan de hoeveelheid text/data op de pagina.

 

[grumbkow]

Mijn manier van uitleggen is soms wat rommelig haha.

Het idee is inderdaad als volgt.
Alle content wordt ingeladen en vervolgens verborgen door middel van CSS.

Dan is alleen de hoofdpagina zichtbaar en wordt er op het klikken van een menu item, die betreffende div zichtbaar gemaakt en dan wordt er naar toe gescrolled.

Nu moet ik alleen nog kiezen of ik dus alle content daadwerkelijk eenmalig inlaadt of dat k het op elke klik inlaad met ajax.