14

If you go to E.g:

When you get to the bottom of the Page, a New News story loads and the URL in my Internet Browser changes to the URL of this Next News Story. So I was wondering how a webpage can almost instantly load the next webpage with almost negligible delay between pages. Are they for example Pre-downloading the Webpage of the Next News story, and then loading the webpage really fast?

2
  • 1
    Press and hold the End key and you will see the loading process delay.
    – MonkeyZeus
    Commented Jun 12, 2015 at 20:29
  • 5
    The more important question is why do they do it.
    – user69037
    Commented Jun 13, 2015 at 2:32

2 Answers 2

Reset to default
25

The short answer is that the page's client-side Javascript code detects when you get "too close" to the bottom of the page, and asks the server for more data when that happens.

Without getting too technical, they are not reloading the entire web page. Instead the Javascript code on that page is requesting more data from the server, then when it receives the new data, it adds that data to the current page. The parts of the page that do not need to change remain completely unchanged.

The most modern way of doing this is to use the HTML5 history-modification features, which appears to be what those sites are using.

5
  • 4
    Your description is missing a step: where they actually change the history, along with adding more data to the page. Which makes your “most modern way of doing this” kind of awkward, because this refers to the process of modifying the history, which doesn’t actually get mentioned in the answer. (Grammatically, this would refer to leaving the rest of the page unchanged, or maybe to adding data to the page, which is typically done with AJAX, and cannot be done with the HTML5 history-modification features.)
    – KRyan
    Commented Jun 12, 2015 at 17:19
  • So what about the URL change, how does that happen without forcing a reload? Because on your link, if you reload a 'modified page' (e.g. /second), it errors. That doesn't happen with OP's news site - they change the URL precisely so you can share it.
    – OJFord
    Commented Jun 12, 2015 at 22:42
  • @OllieFord that's what the history API stuff is for. history.pushState and history.replaceState let you change the URL in the address bar without navigating away from the current page. It's the more modern replacement of the older trick of changing the URL fragment (#something), with a big advantage being that the history API lets you push "real" URLs that the server can participate in generating, while the fragment thing has to be supported completely from the client side.
    – hobbs
    Commented Jun 13, 2015 at 9:18
  • Ah okay. But as I said, the demo is broken, which is confusing.
    – OJFord
    Commented Jun 13, 2015 at 9:28
  • For some reason the history demo I was familiar with was completely broken when this question came up, so that link was the first one I could find that appeared to work at all. Feel free to suggest a better link.
    – Ixrec
    Commented Jun 13, 2015 at 9:34
20

One big key to understanding what is happening: It is possible, via Javascript, to set the URL in the addressbar without actually redirecting the user. To see this in action, paste the below code into a supported browser's console. Notice that it changes your address bar to http://programmers.stackexchange.com/yay.html.

history.pushState(null,null,'/yay.html')

The benefit of this approach is that if the user bookmarks after scrolling to a story, the bookmark will know where to send the user. DeviantArt's infinite scrolling of search results is a nice example of this behavior.

2
  • Wait, DeviantArt has implemented history-modification in its search results, so you can actually link to/bookmark/otherwise record a particular page? That’s... quite something. How long would particular results stay on a particular page for a particular query, though? If you bookmark, I wouldn’t expect to see the same results on that particular page tomorrow... I must remember to investigate this.
    – KRyan
    Commented Jun 12, 2015 at 20:45
  • 1
    @KRyan it just modifies the offset param that skips a certain distance into the resultset. Since the default sort order seems to be "popular all time" the results are probably somewhat stable, but definitely not if you switch the sort order to "newest" and search for something popular.
    – hobbs
    Commented Jun 13, 2015 at 9:21

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.