2

What has been known for a while, is that a "fast navigation" works easily for http://example.com/#1 --> http://example.com/#2.

However, there is a new technique out there. It enables fast navigation between http://example.com/1 --> http://example.com/2.

EXAMPLE: http://rageslide.com/

As you can see in the example, the navigation between http://rageslide.com/1 and http://rageslide.com/2 etc. via swiping apparantly DOES NOT FORCE THE ENTIRE SITE TO RELOAD.
I'd like to do the same for my site, but I have no idea how to do this. All pages served by my site are dynamic (via PHP and MYSQL).

I have this idea:

  • Cache the generated output of a page (http://example.com/2) for 60 seconds.
  • When the user is on http://example.com/1 preload (http://example.com/2) via Javascript.
  • The user navigates from http://example.com/1 to http://example.com/2. Since the content is preloaded and cached, the content will be served to the user instantly.

Different idea:

Will this work? Or what would be the best way to solve this problem?

Jonas Kaufmann
  • 1,797
  • 3
  • 22
  • 43

3 Answers3

3

No, the url you see there is not used to load another page. There are AJAX requests in the javascript code contained in the website, that load the new content to display and update the URL bar.

You can read more about it in this article and in the following questions asked in the past:

Modify the URL without reloading the page

Updating address bar with new URL without hash or reloading the page

Community
  • 1
  • 1
4lbertoC
  • 233
  • 1
  • 6
  • Thanks a lot! I have a feeling that the links you provided will lead me to the solution. Will report back with a solution, hopefully. – Jonas Kaufmann Dec 01 '12 at 20:13
  • I still have a question: since my content is dynamic, would the best solution be to **cache php documents for 60 seconds & preload the next page silently in the background** _OR_ **simply request the next page when the user navigates** ? Edit: When I think about it, I don't really need to cache php documents. I can simply store the preloaded html in a variable. – Jonas Kaufmann Dec 01 '12 at 20:22
  • Correct. You could make the request of the (n+1)th page while you are on the n-th page, and store its content in a variable, or even a hidden div (so it's even faster as the elements have already been added to the DOM tree) – 4lbertoC Dec 01 '12 at 22:13
0

i can think of two possible thing you can try out.

first is simply use iframes to load the next and previous page of each page, and when someone swipes to the next page load the next page to a new iframe or a div with ajax or any other html element for that matter.

the other is to use the rel attribute, here is an explanation about it.

hope this helps you out

Eyal Alsheich
  • 452
  • 4
  • 12
  • Just tried using the 'rel' attribute. This is not what the example I've mentioned uses. The rel attribute causes to load a new document, the example does not do that! – Jonas Kaufmann Dec 01 '12 at 20:12
  • then simply refer to the first option i suplied, in that option you can use the `load()` and `append()` functions with jquery to easily add more content to your page. – Eyal Alsheich Dec 01 '12 at 20:15
  • I think the solution is more complex. I am now reading into @4lbertoC's links. – Jonas Kaufmann Dec 01 '12 at 20:15
0

you can get pretty close without scripting anything or degrading the site by letting the browser cache the expected navigation point resources

for caching images, put dummies at the end of the body <img .... height="0" width="0">

and for pages <link rel=”prefetch” href=”url” /> there is also a rel attribute for next and previous for slide viewer type pages

Note: the url can be a javascript resource

Note2: the transition may be slightly less clean than dynamically populating from javascript especially on larger complex pages, but will still work with noscript or javascript turned off, so maybe a good fallback

technosaurus
  • 7,676
  • 1
  • 30
  • 52