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?

Shriken
  • 1
  • 2
zordman
  • 259
  • 1
  • 7

2 Answers2

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.

Ixrec
  • 27,621
  • 15
  • 80
  • 87
  • 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 Jun 12 '15 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 Jun 12 '15 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 Jun 13 '15 at 09:18
  • Ah okay. But as I said, the demo is broken, which is confusing. – OJFord Jun 13 '15 at 09: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 Jun 13 '15 at 09: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.

Brian
  • 4,480
  • 1
  • 22
  • 37
  • 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 Jun 12 '15 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 Jun 13 '15 at 09:21