Show an animation before show my index.html

Question

I have a website, with few content. So, it loads fast in the navigator. I want to load an jquery animation before show the first index.htm.
Sincerely I don't know how implement this idea. I don't want that the user clicks in the animation to continue to the main site. I want make an animation of 'x' time and when it finish, charges automatically the next html, or the rest of the page.

Thanks very much.

Answer 1

And what about using frames / iframes? Have a simple page with jquery or any other animation and inside this page have a iframe. When iframe is loaded, hide a animation. When iframe is not loaded - show a animation.

I suppose that you want to display some ads in animation. So, then you can create condition - set min time of displaying.

Answer 2

Change your page the way that it loads all content at once including the animation. But the main content is hidden (e.g. by inline CSS) and the animation block is shown. Once your animation is done hide the animation block and show main content instead. As simple as that. This also gives browser enough time to render main content while it plays your animation.

Or option 2 - load index.html with animation only and then load content via AJAX while animation is playing into hidden element.

I would provide an example code if i had laptop or PC at hand, but basic sequence should obvious