[JS/HTML] Javascript Loading Bar

[Ellie]

There are many such scripts out there on the net, but they are silly and often just lying with an animated gif. This script actually produces a working loading bar for your HTML based game.

This is designed to be used with a load page - in this page, you should dump all the images in your game, perhaps with PHP, all of them. The objective is to preload all of the images into the player's cache, so that when they then go to play the game, they don't have to wait for images to load. This has it's advantages and disadvantages, and therefore you'll want to create a "skip" button/link regardless.

The ideal place to use this would be in an iframe on the landing page of the game, like so:

<iframe src="load.html" width="200" height="20">No frames</iframe>

With a little CSS work it will look fine. Remove scrollbars and borders etc.

Now for the code. It's actually very simple.

Each image:

Draw it as such:

<img src="url" onload="plusone();" style="visibility: hidden;" />

In your iframe, you'll want to disable scrolling so that only the loading bar is displayed. We need visibility: hidden, not display: none, otherwise the images won't load at all.

The Loading bar

<div style="width: 200px; height: 20px; border: 1px solid white; background-color: black;">

  <div id="loadbar" style="background-color: red; width: 0px; height: 20px; overflow: visible;">

    <div style="font-size: 12px; font-family: verdana; font-weight: bold; color: white; padding-top: 4px; width: 200px;">

      <center>

        <span id="countspan">

          0

        

        %

      </center>

    </div>

  </div>

</div>

Explanation: we have a container div that draws the background and the border of the loading bar. Inside this we have a div that represents the bar - coloured here in red. This div contains a further div containing the percentage loaded, but this is overflown and positioned in the middle of the bar.

Now all we do is, every time an image fully loads, increment the percentage accordingly. here's the javascript.

Javascript

<script type="text/javascript">



var count = 0;

var total = document.images.length;



function plusone()

{

  count += 1;

  total = document.images.length;

  perc = Math.floor((count / total) * 100);

  document.getElementById("countspan").innerHTML = perc; 



  var o = document.getElementById("loadbar");

  o.style.width=(perc*2);

}



</script>

The result is a loading bar that's a perfect match to that used in RuneScape, (as that's the simplest design really) which you can then style yourself to better fit your game.

Note that this is designed for games such as my own, and I know not many people will have a game like that. But the logic used is hopefully useful to other game engines and other web designers in general.

Happy days!

Example

This is a live example that loads all of the images in the game Afar, therefore you might not want to run it unless you intend on playing the game.

http://afar.ws/v/ucp.php?mode=login

 

[Toams]

This is cool, ive been looking for stuff like this inthe past. Idk if ill use it, since i plan on doing lots of ajax stuff and dynamic shit so thisd be redundant.

Still cool