CODEWITHSUNDEEP
javascriptjquery
Francesco
Francesco

Reputation: 25269

Faster page links loading

I was browsing this website https://amaioswim.com/ and I did notice that when clicking on the navigation on the left side, the url address change instantly.

They also use a "fade out" and "Fade in" curtain to make the transition between pages seamless.

I'm wondering what kind of approach would you use to achieve this.

I know with JS you can change url, but only hashtags url... right? or is it because they have a super fast server with 0 latency?

do you think they are loading everything ajax-ly in a same dvi container?

Thanks

Upvotes: 0

Views: 144

Answers (3)

Daniel Beck
Daniel Beck

Reputation: 21514

This has little to do with the history API. (They are using that API to update the displayed URL, but that's a minor detail in how the site works; on its own it wouldn't create this behavior.)

This particular site is running a clientside framework. (I'm not seeing any obvious clues in the minified code as to which one.)

Links within the site are handled as AJAX requests. They're using the same endpoints for fresh page loads and for XHR calls, and are checking the X-Requested-With header to determine whether to send the full server-rendered HTML file (including the framework for the full site) or just the content for that particular page (which will be embedded clientside in the already loaded site.)

As evidence: this returns the full site (as when a user first visits that URL):

curl 'https://amaioswim.com/about'

This returns just the "about" content (as when a user clicks the "about" link after loading the site):

curl 'https://amaioswim.com/about' -H 'X-Requested-With: XMLHttpRequest'

(You can also see this by viewing the Network panel in the browser console while navigating the site.)

Loading just the content for an individual page is, of course, much faster than loading the entire page HTML (and its CSS and JS), and allows you to add glossy effects like crossfades and animations while the AJAX call is in progress.

Upvotes: 2

James Poulose
James Poulose

Reputation: 3833

That's history API in action. Find more details here

Try the pushState and replaceState methods, that should get you this behavior. To have more precise control over these, you might also want to take a look at popState event

Upvotes: 1

mortb
mortb

Reputation: 9869

Since some years you can use the html5 history api:

https://css-tricks.com/using-the-html5-history-api/

It will allow you to manipulate the url quite freely. For example when you scroll to a new section you can put that section at the end of the browser url.

Upvotes: 1

Related Questions