loading page preloader

[1internet]

I see on sites these days, that when people click to another page, they get a preloader before the page loads.

 

Lets look at this as an example. Say for a list of results, e.g. hotels, with pagination.

The view the first page with 10 results, and click on to the next page.

The current page then has an overlay displayed over it, with a preloader, telling the visitor the next page is loading.

Then the new page is displayed.

 

What is actually happening here. Is it simply just displaying the preloader, then going to the next page?

Or is it actually pre-loading the next page, and as soon as it is ready, displaying it?

[haku]

Simply a display and entirely unnecessary.

[.josh]

A lot of AJAX driven sites do this.  The basic principle is that when you click the button you get the "loading" message.  Meanwhile AJAX is being used to request new data and when a response is received, the "loading" message is replaced with the new content.  Strictly speaking it is unnecessary, but from a user experience point of view it may help as a cheap way to handle high traffic sites or sites with less than optimal hardware/bandwidth so that the user doesn't sit there wondering wtf is going on when they click on something and nothing immediately happens that they can see.

[1internet]

Ok so it is for user experience, to let them know that something is happening, and some event (the preloader) did actually happen on click.

 

I guess you could do it the reverse as well, i.e. when you arrive at a new page it starts with a pre-loader. How would you do that? i..e. display a preloader until the web page has downloaded?

[.josh]

well yes, it's the same principle. It's like when you load up a movie on the internet and it's taking a while to download and instead of making you just sit there and wonder what's going on, it shows you a "loading" message and maybe a % complete or buffering bar or something.  It's not strictly necessary, but it's a psychological thing to let people know that hey, nothing is broken, stuff is just taking a little bit to load up and be ready. 

[1internet]

Ok, so there is no code that can do something like:

 

display preloader until page loaded?

[.josh]

Well yeah you could do that, depending on how you define "load the page".   For example if you have a main content area of your page that uses ajax to load the contents of it (a separate request from the initial page request), you can throw up a preloader while its doing that.  IOW,the "preloader" things you see are basically achieved from loading new content (with ajax) on a page that has already been loaded. You basically separate the page load into separate stages: first a basic "container" with the preload stuff, where you can show the preload message, and then the "content" stuff that loads separately (with ajax).   

 

But if you are asking if there is some way (with javascript) to show a preloader that exists "above" the initial page load, before anything is loaded...well then the answer is basically no.  That scope is on the browser level.  Making a "preload" message at that level would require changing or extending the browser itself. 

 

So when you say that there is a preloader before "going to the next page", one of two things is happening:

 

1) You aren't really leaving the page.  You stay on the same page and some container on the page is being loaded with new content (with ajax), and the preloader message is displayed until that ajax call is complete.  This is what most sites do, what you normally see.  And this is fine, especially if it takes more than a second or two to load the new contents up.  

 

2) If it really does take you to a whole new page..well that preloader isn't really preloading the next page, it's just showing you a message and redirecting you to another page eventually.  That message you are seeing is pointless and just making you unnecessarily wait before the redirect, as far as actually loading the next page.  

 

I rarely ever actually see people doing scenario #2 for the hell of it, however, I do see this happen on sites sometimes.  Why?  Usually a site will do this when they want to do "cleanup and save" type operations before letting you proceed to the next page.  For example, a website may be tracking clicks on a page, so they might execute the tracking script (such as Google Analytics).   Or perhaps they want to make an ajax call or two to save some stuff on the page into some server-side session vars.  So they want to make sure operations like these are complete before redirecting you, but they don't want the visitor to sit there seeing this delay before redirect, so they throw up a "loading" message as a distraction, because it sounds better to tell a user "please wait while the next page loads" instead of "please wait for this current page to finish doing 'unload' stuff".  

[haku]

My original comment was in reference to the second type above. AJAX preloaders are fine, I use them all the time. But sometimes, for example often on airline sites, you enter your search params, and they bring you to a 'loader' page. Maybe they actually are doing something on this page, or maybe it's just for display to make you feel like they are doing something, but either way it's unnecessary. Any processing can be done at the beginning of the page generation on the search results page.