Jump to content


Photo

loading page preloader


  • Please log in to reply
7 replies to this topic

#1 1internet

1internet

    Advanced Member

  • Members
  • PipPipPip
  • 137 posts

Posted 09 March 2013 - 07:22 PM

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?



#2 haku

haku

    Advanced Member

  • Staff Alumni
  • 6,172 posts

Posted 09 March 2013 - 07:58 PM

Simply a display and entirely unnecessary.

#3 .josh

.josh

    .josh

  • Administrators
  • 14,808 posts

Posted 09 March 2013 - 11:42 PM

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.



Did I help you? Feeling generous? Donate to me! || Donate to phpfreaks!
Please, take the time and do some research and find out how much it would have cost you to get your help from a decent paid-for source. A "roll-of-the-dice" freelancer will charge you $5-$15/hr. A decent entry level freelancer will charge you around $15-30/hr. A professional will charge you anywhere from $50-$100/hr. An agency will charge anywhere from $100-$250/hr. Think about all this when soliciting for help here. Think about how much money you are making from the work you are asking for help on. No, we do not expect you to pay for the help given here, but donating a few bucks is a fraction of the cost of what you would have paid, shows your appreciation, helps motivate people to keep offering help without the pricetag, and helps make this a higher quality free-help community :)

#4 1internet

1internet

    Advanced Member

  • Members
  • PipPipPip
  • 137 posts

Posted 09 March 2013 - 11:52 PM

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?



#5 .josh

.josh

    .josh

  • Administrators
  • 14,808 posts

Posted 10 March 2013 - 01:27 PM

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. 



Did I help you? Feeling generous? Donate to me! || Donate to phpfreaks!
Please, take the time and do some research and find out how much it would have cost you to get your help from a decent paid-for source. A "roll-of-the-dice" freelancer will charge you $5-$15/hr. A decent entry level freelancer will charge you around $15-30/hr. A professional will charge you anywhere from $50-$100/hr. An agency will charge anywhere from $100-$250/hr. Think about all this when soliciting for help here. Think about how much money you are making from the work you are asking for help on. No, we do not expect you to pay for the help given here, but donating a few bucks is a fraction of the cost of what you would have paid, shows your appreciation, helps motivate people to keep offering help without the pricetag, and helps make this a higher quality free-help community :)

#6 1internet

1internet

    Advanced Member

  • Members
  • PipPipPip
  • 137 posts

Posted 10 March 2013 - 02:43 PM

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

 

display preloader until page loaded?



#7 .josh

.josh

    .josh

  • Administrators
  • 14,808 posts

Posted 10 March 2013 - 04:49 PM

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".  



Did I help you? Feeling generous? Donate to me! || Donate to phpfreaks!
Please, take the time and do some research and find out how much it would have cost you to get your help from a decent paid-for source. A "roll-of-the-dice" freelancer will charge you $5-$15/hr. A decent entry level freelancer will charge you around $15-30/hr. A professional will charge you anywhere from $50-$100/hr. An agency will charge anywhere from $100-$250/hr. Think about all this when soliciting for help here. Think about how much money you are making from the work you are asking for help on. No, we do not expect you to pay for the help given here, but donating a few bucks is a fraction of the cost of what you would have paid, shows your appreciation, helps motivate people to keep offering help without the pricetag, and helps make this a higher quality free-help community :)

#8 haku

haku

    Advanced Member

  • Staff Alumni
  • 6,172 posts

Posted 10 March 2013 - 10:49 PM

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.






0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users

Cheap Linux VPS from $5
SSD Storage, 30 day Guarantee
1 TB of BW, 100% Network Uptime

AlphaBit.com