Preloader?

[awiiya]

So as I continually increase the amount of pure text that the Oak Log holds, I'm starting to realize that in a few months it could become quite a bit to load, especially on a slow computer.

So to bide someone's time, does anybody know how to create a preloader? Something of the sort?

I'd be willing to pay.

Awi

[Rendril]

To clarify, do you mean a preloader as in it loads data beforehand or preloader as in it looks like it is doing something while the user waits for everything to load, or both?

[awiiya]

I think I mean either or.

If by the first you are talking about caching, that isn't what I initially meant, but that would be nice as well.

Awi

[Rendril]

Awiiya and I discussed this, for those interested in the code here it is:
[code]
<script type="text/javascript">
window.onload = function(){
document.getElementById("loader").style.display="none";
document.getElementById("content").style.display="block";
}
</script>
<div id="loader" style="text-align:center">
Loading...<br />
<img src="http://en9.tribalwars.net/graphic/throbber.gif" />
</div>
<div id="content" style="display:none">
Your content etc
<iframe src="etc etc">Your browser does not support iframes</iframe>
</div>
[/code]

If the page loads fast enough, the preloader is not even seen. If you WANT it to be seen, add a setTimeout to the onload (I will add an example of this if someone would like it)
For cool fade effects use a javascript library like jquery.

Here's the setTimeout, change the <script> to reflect this:[code]
<script type="text/javascript">
function loaded(){
document.getElementById("loader").style.display="none";
document.getElementById("content").style.display="block";
}
window.onload = function(){
setTimeout ("loaded()", 4000);
}
</script>[/code]
The 4000 is number of miliseconds to wait (4 seconds)

Edited January 13, 2010 by Rendril

[awiiya]

Success!

As a sidenote, anything can be used as the gif. There are lots of free ones out on the internet for some personalization.

Awi