Jump to content

How to display an Image or Animation when the Page is Loading on the Browser


maheshforum
 Share

Recommended Posts

First, if the page is taking long enough to load that you need to show an animation while it's loading, then you probably want to work on the load time of the page.Second, what do you want to happen while the animation loads? And wouldn't it be better to have all the user's bandwidth be used to download the site content instead of the animation?In order to do something like this you're going to need a fairly large chunk of Javascript that will be the only thing on the page. The Javascript will have to show the animation, load all of the content and place it on the page where it needs to go, and then hide the animation when everything is finished loading. I'm not sure how to use Javascript to check if a given element has been loaded (like an image has been downloaded).

Link to comment
Share on other sites

If you want a simple cover image/animation, then you can just have divisions that swap

<script type="text/javascript">	window.onload = function() {		document.getElementById("loading").style.display = "none";		document.getElementById("content").style.display = "block";	}</script><div id="loading">	Loading...	<!-- img goes="here" --></div><div id="content">	Welcome to...	<!-- content goes="here" --></div>

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...