Preload gif animation before onLoad Javascript?

Hi all,

I need help preloading a gif animation before my onLoad Javascript with:

<body onLoad="document.paypal_form.submit();">

Without the preload of the gif animation, it would just show the gif image without the animation. Is it possible to preload the gif animation and a play the animation before it completes the form submit command of my Javascript?

I’ve the tried the following Javascript from htmlgoodies.com, but it doesn’t seem to work:


Image1= new Image(175,50)
Image1.src = "image1.gif"

Image2 = new Image(25,30)
Image2.src = "image2.gif"

Image3 = new Image(125,80)
Image3.src = "image3.gif"

Any suggestions? Thank you! :slight_smile:

You can preload the 3 gif files in a SCRIPT tag that you place in the HEAD of your HTML. This will allow your images to render faster on screen when you call for them, but it does not actually display and play the animation (it just loads it into the client’s cache).

What you would need to do onload of the BODY is to call a function that:
>> Displays the preloaded images
>> Submits the form
>> If you know how long the animation lasts, you can wrap your submit statement in a setTimeout, so that it executes only after the animation is complete

Amazing, thanks for the help! It works nicely.

I’ve created a javascript preloader function on the onLoad (preloader():wink: of the document with the following:


function preloader()
	{
		Image1= new Image(16,11)
		Image1.src = "includes/loader-smSquare.gif"
		
		var t=setTimeout("document.paypal_form.submit();",3000);
		
	}

It loads the gif animation and gives the page 3 seconds before submitting the document.

One more question:

When I successfully get redirected to the requested page through the javascript setTimeout function, it works fine–but when I click back to the previous page after going the requested page, the setTimeout function doesn’t work. Is there a better way to always run the setTimeout function for the page everytime I visit the page?

Just one thing though; I would employ a slightly different sequence…
You might want to place the preloader in the HEAD, such as:
<script src=“myjs.js”>
preloader();
</script>

This will start loading the image before the page loads. The preloader function (located in the myjs.js file) looks like:
function preloader() {
Image1= new Image(16,11);
Image1.src = “includes/loader-smSquare.gif”;
}

Now, in the BODY, you would have something like:
<body onload=“submitForm();”>

The submitForm function (also located in the myjs.js file) gets executed after the page has loaded, and looks like:
function submitForm() {
new setTimeout(“document.paypal_form.submit();”,3000);
}

There you go! :wink:

One more thing, do you see any error messages in the status bar after 3 seconds when you hit the back button?