PDA

View Full Version : Preloader for non-flash sites?


Theros
April 26th, 2009, 09:05 PM
Hey guys!

Question for you all. Do you guys know any preloaders (like JS powered) that I can put on my website just to show users that their browser is loading stuff? I've definitly seen stuff like this before, and I'd like to implement since my site has some not-so small scripts to load.

Thanks,
Eric Huang
graylensman
April 26th, 2009, 09:43 PM
Dude - how long you been posting on Kirupa? You know better than to post that kind of question in Random, when you know darn well you should post it in the Client-Side forum! Damn! I think you need to make a website dedicated to the Glory of God for fifty cents.
Theros
April 26th, 2009, 09:50 PM
Dude - how long you been posting on Kirupa? You know better than to post that kind of question in Random, when you know darn well you should post it in the Client-Side forum! Damn! I think you need to make a website dedicated to the Glory of God for fifty cents.

Oh, right...we still have a client-side forum lol? Does anyone actually post in there? hehe...

modEdit: graylensman's right, you should know better by now!
Swooter
April 27th, 2009, 04:43 AM
window.onload = function() {
// do stuff (such as hiding an overlaying DIV with a loading animation)
}
graylensman
April 27th, 2009, 10:15 AM
See? Swooter gave you good advice in the Client-side forum, while I just gave you snark in Random. A lesson let that be. :yoda:
Theros
April 27th, 2009, 06:00 PM
window.onload = function() {
// do stuff (such as hiding an overlaying DIV with a loading animation)
}

I can't write my own JS all that well...can you link me to a decent example which I can then tear apart?
Swooter
May 1st, 2009, 08:01 AM
no
simplistik
May 1st, 2009, 08:45 AM
One thing you could try to do is say have a "preloader" div as the first element of your site:


<head>
<!-- all your scripts here -->
</head>
<html>
<div id="preloader">
<!-- some fancy smansy message -->
</div>
<div id="content">
<!-- all your other crap would go here -->
</div>
</html>


your css would look something like this:


#preloader{display:block;height:100%;position:abso lute;width:100%;}
#content{display:none;}


then at the bottom of the page right before the </body> you'd do some javascript, if you're using jQuery it'd be something like


$('#preloader').hide('fast', function() {
$(this).remove(); // removes the preloader div from the html
$('#content').show();
});


the theory would be since you're adding that piece of script below at the bottom of the page, it's the last thing to get loaded after everything above it is finished






window.onload = function() {
// do stuff (such as hiding an overlaying DIV with a loading animation)
}


no
Don't answer next time if you're not gonna provide decent support or a decent answer ... crap like this is annoying.