Html Js page loader

[Teensweb]

Does anyone know how to create a pageloader with a progress bar that would show the percentage (with html/js)?

[blueiron]

Never really seen the need for something like that.
The only way I can think of completing it, would be to have an AJAX script load the page, and until the page is loaded it would display the progress bar.

You could set the progress bar up based on a page-size in Bytes, or Kilobytes, and have the AJAX script somehow sum up the currently loaded bytes and compare them to the pages set bytes amount.

But I haven't had enough experience in JAVA/AJAX to know how to do that off-hand.

[diabolo]

http://www.google.com/search?hl=en&q...pt&btnG=Search
first link
or
http://www.andrewpeace.com/loading-screen.html
http://codingforums.com/showthread.php?t=153301

[VPmase]

Are you trying to load the page without refreshing? Aka AJAX?

http://www.w3schools.com/ajax/ is where I learned AJAX.

[xav0989]

Unless you are building a photo gallery, aka a page with loads of picture, I'd say javascript page loader are pretty useless. If you are trying to use AJAX, then a simple div with 'Loading...' in it is sufficient.
If you are trying to have a JS loader for a normal page (html + css + some simple images) then you should not have a loader.

[Teensweb]

can anyone give me the right code?
Edit:
If anyone did not understand, i'll make it clear: I am looking for something that does the following-
1. While an html/php page is being loaded- show a division that covers the entire page.
2. On top of it, show a percent loader which shows the whole page's(not only the imgs) progress
3. And that should not be based on flash.
4. I want an image(custom) to show the progress not just a color.

[VPmase]

I don't think there is a way to get the percentage loaded of a webpage in that same webpage.

[sonicsshadow]

Not to be rude, but isn't this why we have the progress bar in most web browsers?

Also, I know JSQuery has something that checks if the page is ready to use, maybe you could use that to check if the page isn't loaded.

What you could also do is create your entire site and then make it so the Javascript outputs your website to a hidden div. As it outputs your website, you can manually have it so like when it prints out each paragraph, you increase the progress variable. Then, for the image, increase the width of it each time the percent increases, so it looks like it's filling up more space. Once the percent variable reaches 100, you could then hide the div with the loading bar in it and then show the div with the site on it.

I don't know WHY you would want this though.

[mattura]

I agree with xav0989.
There are two possible situations:

1) You have a massive page with loads of content, it loads slowly, piece by piece and you want it all to appear in a flash (no, not Macromedia Flash), at once.

2) You don't have a massive page, but you want a fancy loader screen to make your site look cool, and show the progress whilst loading the page.

For situation 1, your best bet is to load the bulk of the content separately, using AJAX/javascript/splitting into separate web pages/whatever method. You can even have a loader bar for each bit!
Most web users will not tolerate long waiting times (long can be a few seconds!). So it is always a good idea to split up bulky pages into separate sections on a web site.

In situation 2, most likely users would barely see your loader before the page replaces it (unless you fake a timer). Realistically, waiting for a page to load involves some time before the page starts to load (which probably takes up the most time), and this you can do nothing about. You can't even load your loader. Then, some time when the page is loading, usually very quickly. Hence the loader would flash up for a split second. Not worth the effort!

[Teensweb]

I agree with xav0989.
There are two possible situations:
2) You don't have a massive page, but you want a fancy loader screen to make your site look cool, and show the progress whilst loading the page.

In situation 2, most likely users would barely see your loader before the page replaces it (unless you fake a timer). Realistically, waiting for a page to load involves some time before the page starts to load (which probably takes up the most time), and this you can do nothing about. You can't even load your loader. Then, some time when the page is loading, usually very quickly. Hence the loader would flash up for a split second. Not worth the effort!

I'll make sure that my page loads slowly enogh!:laugh: