How to properly implement loading bar for loading urls? - javascript

I think this question was asked in a similar form before but I didn't get a clear understanding how to implement it properly.
I have a site, which has different pages on their own urls, like '/contact', '/about', '/products'.
What's the technique to put a top bar on the top like this one http://nanobar.jacoborus.codes/?
Here is what I need:
User clicks a link on the page.
JavaScript handles the click, shows the progress bar, starts growing it then passes the event to browser.
Browser starts loading the page. At this moment, page clears and becomes white and blank.
As the progress bar was in some position that is not zero, say, 63%, and now there is no information on the new page about where it was.
So, I can technically run some function on every page, like showGrowingProgressBar(value), but since I don't know where it left, I cannot put it in the same progress state as where it left.
How do I make it look natural, like the user didn't leave the page, but more like an SPA experience?

I guess you want to build an one page web application where things load in the same page without refreshing.
You can use AJAX to do this. you can populate a particular div with the new html without refreshing.
It can be handled more easily using Angular JS. You can define routes for every page and can also have templates for different page, and can load that template when user clicks on the link. It will just replace the container div with new html codes and you can also handle the urls easily.

Turbolinks seems to be what you are looking for. It dynamically loads your pages and shows a loading indicator.
Turbolinks makes navigating your web application faster. Get the performance benefits of a single-page application without the added complexity of a client-side JavaScript framework. Use HTML to render your views on the server side and link to pages as usual. When you follow a link, Turbolinks automatically fetches the page, swaps in its , and merges its , all without incurring the cost of a full page load.

Your approach is:
User clicks a link on the page.
JavaScript handles the click, shows the progress bar, starts growing it then passes the event to browser.
Browser starts loading the page. At this moment, page clears and becomes white and blank.
As the progress bar was in some position that is not zero, say, 63%, and now there is no information on the new page about where it was
Your approach should be:
User clicks a link on the page.
JavaScript handles the click, browser starts loading the page. At this moment, page clears and becomes white and blank.
New page shows the progress bar, starts growing it then passes the event to browser. The growth can be picturized by the no. of API call completed divided by total no. of api calls, required for that page.

Related

URL navigation in a single page website

I have a single pager website where each of the buttons takes you to a separate section following an animation. I've set up an example here: https://dev.dport.me.
Currently when you navigate to a page, the URL stays the same. For example, navigating to the About section does not append #about to the URL. I would like the site to work more like a normal site in respect to navigation.
What is the best way to go about making it such that:
Navigating to a "page" changes the URL. Following the example, either to #about, or even better, /about.
Navigating directly to a subpage works. Meaning that if I navigate to https://dev.dport.me/about, it takes me straight to the subpage.
The back button works. Currently if you navigate into a subpage, you must use the back button on the page. The browser's back button just leaves the whole site.
Is there some pre-existing javascript library that does what I'm looking for? Or am I going to have to gun it alone, perhaps with something like this.

Go back button in single-page webapp

I'm bulding my first WebApp. I've got a small navigation bar in the head where a back button should be placed. The Pages of the app are all placed in one document so the div's are set to
<div id="page_1" class="page" style="display:none">
and will be shown by clicking on a link
onclick="show('Page_dash');
Now i want to have a back button which goes back to the last shown page. I've tried this
onclick="history.go(-1);
but it's not working because there is only one page which contains all pages so the history.go(-1) goes to the last visited homepage. So i'm looking for a good, fast and simple solution!
thanks
In order to create an effective single page application (SPA), you will need to implement a method to track history that appears traditional to your end users. There are a few different techniques for this, but as a developer of enterprise-level single page applications, I highly recommend using the url hash method.
This technique allows your end users to bookmark specific "pages" in your single page app, along with using their browser's back button to return to the previous page. End users can become extremely frustrated with a single page app if they try to return to the previous page using their browser's back button, and find that they are returned to Google, or whatever site they visited before yours.
Here is some additional reading on the subject: URL Hash Techniques

How does Facebook scroll to middle of timeline banner without delay?

Facebook has two ways to display somebody's timeline: starting from the very top, showing the full banner, and semi-scrolled, so the banner is cut in half and the profile picture is very close to he floating navigation.
However, the semi-scrolled state seems very natural, there is no delay. The page does not suddenly jump when the content is loaded.
How is this feature implemented in general? Simple window.scroll seems not to be cutting it as it's too slow (has to wait for the content to load to actually have something to scroll) and rather hinders user experience.
You assume in your question the initial loading of the page. That assumption is wrong, because the "page", so to speak, is already loaded.
When you are visiting one facebook page, and then navigate to someone's timeline, it's not a full page refresh in the browser, switching from one page to another. Rather, it's all done via ajax. The "previous" page is not really unloaded by the browser, and the "next" page is loaded via ajax.
As for the url changing, that's a different topic (history pushState).

Render optionally needed content only when needed on dynamic JS page

I am building a web application which I intend it to work like a traditional 'software': as few page reload, and page redirect as possible.
My solution to page reload and redirect is to have them as 'tabs' within the app, so when you click on another tab, the div of your current content will shrink to 0 width.
My question is: how do I prevent the content (writtent in JS, w/ PHP backend) in a tab to load unless when it's clicked on?
(Assuming this is what I should do to reduce unnecessary load)
Just don't load it until the link/button/etc. to the tab is clicked.
See also the jQuery tab implementations.
If your back-end is in PHP, you should control what you send to the client from there.
By the time the js gets the code, it is too late to control what not to load. You can hide it, or remove it, but it has already been loaded.
So, to reduce unnecessary load, and as a good practice, you should only send to the client the active 'tab'. That has to be done in PHP in your case.

Deeplinking Infinitely Scrolled Pages

I'm creating a infinitely scrolled page that recursively loads and append the next page's content into the current page. I think the browsing experience can be great and immersive but the current method is not without usability drawbacks.
Incomplete progressive enhancement. It is always good to support the back button and provide deep linking when using Ajax. The current implementations of infinite scroll does not support this. There is no way a state can be bookmarked.
Some ideas on improving the UX of infinite scroll. Need opinion.
Change the URL hash with each load, e.g. /!#/2 -> /!#/3
Clicking the back button should scroll the page upwards. Clicking forward button should scroll it down.
Accessing a deep link should behave like it was before Ajax. Going to and also starting at page 3 should show only page 3 content and not page 2 and 1, since the user is not asking for them.
There should still be a way for him go to page 2 and 1, like if it was regular pagination. Since page 3 is loaded with scrollTop at 0, the scroll up event is not useful. For this we might still need a clickable link.
We need to check if the requested page number is greater than the current because we should not loaded page 2's content at the end of page 3.
What do you guys think?
Interesting question. I would suggest changing the URL hash in the form of #!/from/123/to/456, and increase the to ids as page loads.
Whether you are using hash or History API rewrite to modify URL, in UX sense, URL always represent the location of current content. For example, user will expect a bookmark, hitting reload, or copying the URL to other computer and click Go, will return the same page.
The only way for your infinite scrolling page to complete the logic of URL is the URL hash I suggested above. Otherwise just leave it; Twitter doesn't update URL hash on their home page.

Categories