1

I have created JavaScript app for the iPad, where everything is web based. All pages have very much content in them, and many links. So when I click on a link, the page shows white area while it shows (loads) the content. I want it to stay on the previous page when I click on a link while the next page is loading. I want it to show the next page if it is fully loaded. How can i do it?

fresskoma
  • 25,481
  • 10
  • 85
  • 128
G unitzo
  • 89
  • 14
  • Maybe you should consider not to load it just after a click. Better to guess which link will be clicked next an prefetch it. Google a bit for page prefetching. The second is to reduce page size at all and load it part by part using Ajax. Waiting a few seconds until the page has load will bounce a lot of users... – Karl Adler Jun 12 '13 at 11:07

2 Answers2

3

As far as I know, the only way to achieve this is to use AJAX to load your content. That is, instead of reloading the entire page for every link, you just reload portions of content depending on what link was clicked.

Let's say your page has a container like this:

<div id="content">...</div>

Then, for every link (matching a certain condition if you don't want it to happen for all the links), you execute an AJAX request similar to

$("a").click(function() {
    $this = $(this);
    var data = {}; // Put additional parameters here
    $.get($this.attr("href"), data , function(response) {
        $("#content").html(response);
    }
}

As @rofavadeka has mentioned, you can also modify the URL so that it reflects the change of location, using something like:

 window.history.pushState("object or string", "Title", "/new-url");
fresskoma
  • 25,481
  • 10
  • 85
  • 128
  • 1
    Was just answering the exact same thing. I think the only solution. Make an ajax request (for example the full page), paste new content into (for example body) using javascript when fully loaded, then modify url using js -> window.history.pushState("object or string", "Title", "/new-url"); – rofavadeka Jun 12 '13 at 11:06
  • 2
    Note that `pushState` isn't supported by versions of IE lower than IE10. But since it's an iPad thing that's no issue. – jdepypere Jun 12 '13 at 11:28
1

Have you considered using jQuery Mobile for this? This is a library that has exactly those features you are looking for.

Zim84
  • 3,404
  • 2
  • 35
  • 40