Hi, from my part of the world (Africa) the web form I created with WDB loads slowly so I want to show a "loding gif" while it loads.
When I researched this on the net there are many suggestion on how to do this with a hyperlink but since the form I use is loaded with a JavaScript (from what i can tell) I'm not sure how to do it.

Any one have an idea or an example?

Thanks.

Hi Rick, well, if you are talking about initially loading the form, i may have to look around.

Check here, many types, many prices but not bad...
http://codecanyon.net/search?utf8=%E2%9C%93&term=progress+bar

If you are talking about after you hit the 'submit' button, then try this ...
http://progrower.coffeecup.com/forms/submitting/

Yes, I'm talking about initially loading the form.

Really adding an image will just slow things down even more because you have to download the loading image and then download the form. That just compounds the problem.

The image I was thinking of is only a 4k animate gif, so that would not be much compounding. I could even use a text message! The point is how would i detect when the form has finish loading to remove the message, image etc
It takes about about 10 - 20 sec to load, so in the mean time i would like to show the user some sort of feedback that something is happening. That is what I'm trying to work out!

If you go to the CodeCanyon link I posted above and look at the Pure CSS3 progress bar, then read the 'comments'. One user asked how to display the bar for a specific amount of time ( 10 seconds in his case) and the author explained how to do it. The script is only $3 if you use it. Just one option, there may be others.

A free option!
Right, this is what I came up with (ok copied and pasted ) based on this two articles http://bit.ly/1ks91za and http://bit.ly/1ks99P5.
I did do some programming, I changed the 5000 to 10000 and changed the id label on the setTimeout function to 'bg'!
Here is a demo webpage http://bit.ly/1A1szOH with the form (my form) in question!

When the index.html file loads the "loading" animated gif is displayed, at the same time the Web Form Editor code begins loading the form. After 10 sec (10000 milliseconds) the gif is removed.

Now, how can we change the code to show the gif while the form load instead of using a fixed time, is there another function I could use?

Place at the bottom of your form page.

That's great Eric, thanks! I found that function in my research but didn't know how to use it!

I changed the test page but I noticed that the image is hidden a sec or so to soon for my liking, is there a way to fix that!

So for me to understand the the $(window).load(function () is triggered when the page finally loads?

Just a thought, can I have the $(window)... function run the setTimeout function to keep the image displayed for just that bit longer, say another sec or so. That would give me a small (i'll take what ever I can get!) margin of control over how long it takes for he image to be hidden. How would I call the setTimeOut function?

I think I worked it out. Now the image hiding is delayed by the timeout function!

New test page http://bit.ly/1u8Qw6a