0

I have seen a method on Youtube and various other sites, which, upon changing to another page on the same server make the browser not directly redirect the user to the new page, but

  • stays on the same page until the new one is loaded
  • dynamically loads the new pages content seemingly without any idle time inbetween page changes
  • shows a progess bar on the top of the screen
  • leaves any html headers or other fixed content unchanged

In this gif you can see the animation on top of the page, upon changing the page, there is a progress bar and the new page is displayed seamless.

Youtube dynamical page load

Here is where I am a little helpless, my attempts of finding something useful in this manner brought me practically nowhere, i do not know if there is a library/framework for this use that i simply cannot find or there is some messing around with dynamical page loading i do not know about.

How is such an effect achieved and what techonolgies are requiered?

Clemens Himmer
  • 1,340
  • 2
  • 13
  • 26
  • You're looking for AJAX. – SLaks Jan 11 '16 at 19:07
  • I do know about AJAX, i suppose you want to let me know, there is a handler bound to every `link` that, instead of redirecting to the page, loads its contents into the container? I cannot imagine entirely imagine how this works. – Clemens Himmer Jan 11 '16 at 19:10
  • Yes, that's exactly how it can work. Or, you can write all of your views in JS code and just load data from the server. Look at SPA frameworks. – SLaks Jan 11 '16 at 19:11
  • SPA, just what i need it seems, i guess looking into SPA routing won't hurt then, although i am quite confused about how the backend will look like. Especially with the fact that any url on YT will load the single page. I could now only find [this example](http://embed.plnkr.co/dd8Nk9PDFotCQu4yrnDg/), but how different URLs are handled are still a mysterium to me. – Clemens Himmer Jan 11 '16 at 19:17
  • Configure your web server to serve your entry point HTML for all URLs. – SLaks Jan 11 '16 at 19:29
  • Oh and handle the URLs with server-sided processing, making the URL kind of an "argument" passed? I think i am getting closer to understanding this, but the whole solution YT uses, is a tad bit more complicated than i thought. – Clemens Himmer Jan 11 '16 at 19:31

1 Answers1

1

You need a single page application framework. For example look at AngularJS

If you want, you can do it with pure JS code using AJAX.

Mihail Petkov
  • 1,535
  • 11
  • 11
  • Thank you, i knew about SPA to a certain degree, the question in detail is a bit unclear i'll admit that, i can actually create a very simple SPA with custom JS, but routing and URL handling in the SPA is a really big question mark for me. – Clemens Himmer Jan 11 '16 at 19:19
  • https://docs.angularjs.org/tutorial/step_07 Look here, you can see how to do the rooting with AngularJS :) – Mihail Petkov Jan 11 '16 at 19:22
  • To some extend this is what i need yes i, but still leaves the question open, how is the animation achieved, not the animation itself, but the state of the progress bar, how is it indicated how long it will still take to finish loading the new page? I know i'm a witty annoying asker :P – Clemens Himmer Jan 11 '16 at 19:28
  • For example look at this library - http://chieffancypants.github.io/angular-loading-bar/ . Click on `Real example (from reddit)` button. It is the same functionality :) – Mihail Petkov Jan 11 '16 at 19:30
  • Oh i see, i probalby do not want to use this exact animation but that'll library will enable me to understand how this works. In combination with [this](http://stackoverflow.com/questions/824349/modify-the-url-without-reloading-the-page) and @SLaks comments i probably will be able to replicate this exact behaviour. Accepting answer. – Clemens Himmer Jan 11 '16 at 19:36
  • You don't need this link. Angular will automatically change the url without refreshing the page :) You can see how to describe urls in the link above - https://docs.angularjs.org/tutorial/step_07 – Mihail Petkov Jan 11 '16 at 19:37