Including a "loading indicator gif" while page loads

Hi and THANK YOU for making such an awesome and user-friendly script. By far the best I have found for my uses!!

I  have been searching for a (solid) day now, a way to integrate an activity indicator (eg animated gif) into the HTMLHttpRequest 'experience'. In the event of a slow connection/a page with lots data, it would be wise to have a way to tell users the page IS in fact loading. (Research tells me that users get uncomfortable waiting if there is no indication of whats going on after a max of a few seconds).
Can you recommend an addition to your script in which I could toggle the visibility of an animated .gif while the page is loading?

eg:
before  link is clicked (gif visibility = hidden)
on clicking link (gif visibility = visible) //telling users that something is happening
when new pages loads in target div (gif visibility = hidden)

//This  begs the second part of the issue. If the user doesnt know whats going on, and waits too long, they (i was) impatient and clicked the link i wanted to load again... and again... and again. It loaded the page deeper and deeper into the div, which obviously looked odd. Any ideas?

I WOULD GREATLY APPRECIATE ANY HELP YOU CAN GIVE!!!!!!!!!!!
FYI: I am a designer, not a coder, but WISH I had a coding mind. (I have struggled for years to try coding, with very little success) [[If you are able]] I would be most greatful for any additions to your code as writing functions etc myself is totally beyond me...
:(

Here  are some websites I have found re the first issue:
http://www.ajaxload.info/
http://www.gen-x-design.com/archives/ajax-activity-indicators-make-them-global -and-unobtrusive/1
http://ajaxpatterns.org/Progress_Indicator
http://homepage.mac.com/kevinmarks/staticjah.html
http://www.maxkiesler.com/index.php/mhub/category/

Hi Angus, thanks for responding to my cry for help! (many wouldn't!!)
I implemented what you suggested, and it worked GREAT!

The  one problem I initially ran into was that the GIF appeared at the top left of the area where the "target area" was. This was not the place I wanted it on my page. I tried inserting HTML code within the javascript function, and this worked well.
I tried inserting the <DIV> tag into the javascript function so that I could format the positioning from within my CSS file but it didn't like that. SO, the only other solution I could come up with was to use the <br /> and <blockquote> tags. Eventually, I got the spacing I wanted.

Thanks  so much again!

For  anyone else who wants to add a "loading" gif while the new page is loading, but doesn't know where to find a cool animated GIF, I highly recommend the link I gave in my previous post: http://www.ajaxload.info/
They  give you lots of options for creating your gif, including a transparent background option. Its definitely worth a look.

Grab the code from /test/ for now, it has got that built in :).

-  Angus.