How do Big sites prevent the loading circle on tabs from showing?

Question

Okay I do not know how to explain this to you, It may be just my internet, or maybe my site is slower, or they really have a technique for doing this.

If you visit Facebook, Reddit, Youtube, Twitter, and if you click on links or any actions on those websites, the url changes but the browser tab doesn't show any loading circle.

How do they do that?

I am pretty sure my website is fast enought and at times it loads even faster than the bigger sites, but mine shows the loading circle on the browser tab.

Answer 1

Okay so I found the answer. Here is the technique for changing the url without reloading the page.

Updating address bar with new URL without hash or reloading the page

How do I modify the URL without reloading the page?

I am still trying to figure out though how to redirect the actual page without reloading the entire page. I am guessing they are loading it via ajax or something similar upon url change. I'll update this once I figure it out.

Edit: I am currently working on this feature for my site. The technique is to use ajax to load the content based on the url. I'll update this thread more as I update my site with this feature.

Edit 2: Damn, you will probably face the same problem I had trying to detect the url change without using onhashchange. If so, here you go:

How to detect URL change in JavaScript

This literally took me 4 hours just to figure that one out.....

Edit 3: I have now integrated this feature on my site. You can check it at

Grandweb

It is quite simple, but lots of work in appending the content once retrieved via ajax. So here is the process:

I am using pushState(); to change the url without reloading the page.

    var url = $(this).attr('href');
    var split_url = url.split('/');
    var new_url = url.replace('https://grandweb.net/','');
    window.history.pushState("object or string", "Title", "/write");

Using 'mouseup' was a bad idea, I changed my mind. I then have to trigger the first function using 'mouseup' to retreieve the content via ajax, and then listen to succeeding onpopstate() for the next ones, because some mouse actions such as Mouse 4 or Mouse 5 are bound to the browser's Back and Forward button, and does not trigger via 'mouseup'.

    $(window).on('mouseup', function(evt) {
          get_content();
    }

    window.onpopstate = function(event) {
          get_content();
    }

The first one is responsible for triggering the function on first try because onpopstate only listens only when the browser's history API is populated. Using mouseup was a bad idea, basically, don't use it unless you really want to detect mouse action from anywhere on the document.

I instead use the anchor tags/links to trigger the first function for retrieveng content.

example:

<a class="dynamic_btn" href="website.com/post">Home</a>

then

$(document).on('click','.dynamic_btn',function(e){
    e.preventDefault();
    get_content();
});

Using onhashchange is possible IF you have hashes on your url. I do not use hashes on my url so basically onhashchange is useless in my use case, unless I do not know something.

After retrieving the contents, I append them via creating DOM elements to existing containers from the page.

This is much easier to do if you are planning to change few elements or containers in your pages. If you plan on doing this to change a full page layout, goodluck. It's doable, but it's a really pain in tha *ss.

Upon observing Facebook, I learned that they do not implement this technique in all of their links/features. It makes sense because this is harder to maintain most especially because most of the work here is being done client side. It is very nice though because the page doesn't load.

I have implemented it on a few 'essential' functions of my website such as the viewing of posts and returning to the homepage. I can implement it on the whole site, but I am still deciding on that. That is all, thank you very much for reading internet stranger.