4

I am loading pages using AJAX and changing the browser address bar accordingly for a smooth experience.

My doubt is if the browser address bar should change when the new page is called by the user (when he interacts with an element like a click in a link) or once the page starts appearing?

Some things to consider:

  1. The page fades out with transitions the content that is going to be replaced
  2. The new content enters with a fade in
  3. The page might give a timeout error (some problem and it couldn't load correctly)
  4. The page might not actually exist anymore (404)
  5. Some seconds might pass before the content arrives

I have reasons for both of the options but I'm not sure if points 3 and 4 should weight more. Also if the case was 4, should the address change at all?

4

This answer is based on my experience designing single page applications rather than any research.

I would change the URL when the new page is called for the following reasons:

  • It is best to mimic standard browser behaviour so that page loading works the way the user expects or is accustomed to.

  • If the new page is taking a while to load, the user might refresh the browser to resend the request. If the URL hasn't changed by this point, then they'll be unexpectedly taken back to the previous page. Depending on the server request pattern being used, this might erase any form data that the user had inputted (for example).

  • If the URL changes after the content loads (e.g. by using document.addEventListener("DOMContentLoaded", function(){});) then you risk waiting a very long time for the URL to change if one of the HTTP request hangs, such as a call to Google's font server. During this time the user might think the page has actually loaded, and might copy the old (wrong) URL to share with someone.

  • Thanks for the answer. Good points, specially the first two. I was having some issues with the fadeout fadein and the user clicking back/forward faster than those, that is why the doubt came. – Alvaro Jan 12 '17 at 17:56
  • upvoted so just to clarify i am using pushstate to update the url while doing an AJAX call, you are saying that the url should change immediately and not wait for the response/error to come? – PirateApp Jan 23 at 8:20

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.