How Do News Websites E.g. Forbes / Zdnet Seamlessly Merge One Webpage into Another?

Question

If you go to E.g:

• http://www.forbes.com/sites/adrianbridgwater/2015/06/12/why-technology-has-to-be-continuous/ OR
• http://www.zdnet.com/article/if-you-want-those-cool-ios-9-features-its-time-to-buy-a-new-ipad/

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?

Answer 1

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.

Answer 2

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.